One issue I am facing is with a mat-chip list. When I close the first item it works fine, but when I close the last item, all chips are closed.
https://i.sstatic.net/opj7f.png
Here is the HTML code snippet:
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let keyword of keywords" [removable]="removable" (removed)="remove(keyword)">
{{ keyword }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input placeholder="{{ 'consultantSearchPage.searchForConsultantOrSkills' | translate }}" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="addSearch($event)">
</mat-chip-list>
</mat-form-field>
And the corresponding TypeScript code:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this._store.dispatch({ type: UPDATE_KEYWORDS, payload: index});
}
}
If I modify the TypeScript code as follows:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this.keywords.splice(index, 1);
}
}
It works, but the data is not updated.
Here is the reducer code snippet:
export const UPDATE_KEYWORDS = 'UPDATE_KEYWORDS';
.......
case UPDATE_KEYWORDS:
console.log(state.keywords.splice(0, 1));
return Object.assign({}, state, { keywords: state.keywords.splice(action.payload, 1) });