检查后更改 - Angular [已选择]答案

【问题标题】：Changed after checked - Angular [selected]检查后更改 - Angular [已选择]
【发布时间】：2018-07-20 11:54:20
【问题描述】：

我在 Angular 中为标签使用材料芯片，由 *ngFor 循环。

<mat-chip class="c-pointer" *ngFor="let popularTag of popularTags; let i=index" [selected]="popularTag.is_user_tag" (click)="toggleTag(i)">#{{ popularTag.title }}</mat-chip>

我需要在芯片点击时切换“is_user_tag”值，但它会引发错误

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-chip-selected: true'. Current value: 'mat-chip-selected: false'

我尝试了 setTimeout() 和 ChangeDetectorRef 方法，但都没有解决问题。

我该如何解决这个问题？

【问题讨论】：

您是否尝试在 mat-chip 组件中拆分 onClick 所在的 html 代码？我的猜测是 onClick 的当前位置太高了 1 级，即它点击整个列表而不是项目。

标签： angular select foreach inotifypropertychanged checked

【解决方案1】：

当您有多个选定的芯片时会出现此问题。如果你想要多选，你必须在mat-chip-list上设置[multiple]="true"

<mat-chip-list [multiple]="true">
    <mat-chip class="c-pointer" *ngFor="let popularTag of popularTags; let i=index" [selected]="popularTag.is_user_tag" (click)="toggleTag(i)">#{{ popularTag.title }}</mat-chip>
</mat-chip-list>

演示：https://stackblitz.com/edit/angular-x7tkwc

【讨论】：

不要从“multitple”评论中复制粘贴是不行的哈哈（懒惰，我知道）