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

Question

我正在为 Angular 中的标签使用 material 芯片，它们由 *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 方法，但是 none 解决了问题。

我该如何解决这个问题？

Answer 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

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

Changed after checked - Angular [selected]

angular

select

foreach

inotifypropertychanged

checked