我的问题是:我有 mat-chip 列表,如果我关闭第一个项目就没问题,如果我关闭最后一个项目,所有项目都关闭了:
这是我的 html:
<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>
这是我的 ts:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this._store.dispatch({ type: UPDATE_KEYWORDS, payload: index});
}
}
如果我使用:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this.keywords.splice(index, 1);
}
}
没问题,但我的数据没有更新
这是我的 reducer 代码:
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) });
最佳答案
根据您的评论,您正在这样做:
case UPDATE_KEYWORDS:
console.log( state.keywords.splice(0, 1));
return Object.assign({}, state, { keywords: state.keywords.splice(action.payload, 1) });
而你应该这样做:
case UPDATE_KEYWORDS:
state.keywords.splice(action.payload, 1);
console.log(state.keywords);
return Object.assign({}, state, { keywords: state.keywords });
你要使用已经拼接好的数组,而不是拼接返回的数组。
关于javascript - 关于 Angular Material 设计的问题 <mat-chip>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52092224/