[英]Problem <mat-chip> on angular material design
My problem is: i have mat-chip list and if i close the first item it's ok and if i close the last item all are close: 我的问题是:我有芯片清单,如果我关闭第一个项目就可以了,如果我关闭了最后一个项目,则都关闭了:
this is my html: 这是我的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>
and this is my ts: 这是我的ts:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this._store.dispatch({ type: UPDATE_KEYWORDS, payload: index});
}
}
and if i use: 如果我使用:
remove(keyword): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this.keywords.splice(index, 1);
}
}
it's ok but my data are not update 可以,但是我的数据没有更新
and this is my reducer code: 这是我的减速器代码:
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) });
From your comment you are doing this: 根据您的评论,您正在执行以下操作:
case UPDATE_KEYWORDS:
console.log( state.keywords.splice(0, 1));
return Object.assign({}, state, { keywords: state.keywords.splice(action.payload, 1) });
whereas you should do this: 而您应该这样做:
case UPDATE_KEYWORDS:
state.keywords.splice(action.payload, 1);
console.log(state.keywords);
return Object.assign({}, state, { keywords: state.keywords });
You want to use the array that has been spliced, not the array returned from the splice. 您要使用已拼接的数组,而不是使用从拼接返回的数组。
https://www.w3schools.com/jsref/jsref_splice.asp https://www.w3schools.com/jsref/jsref_splice.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.