javascript - 垫芯片中(单击)中的ExpressionChangedAfterItHasBeenCheckedError

尝试在mat-chip的点击事件上设置值时，出现了ExpressionChangedAfterItHaHasBeenCheckedError

我创建了一个堆栈闪电来查看操作中的错误（打开控制台，然后单击两个或更多芯片）：https://stackblitz.com/edit/angular-ddapw1?file=app/chips-stacked-example.html

// index.html
<mat-chip-list>
  <mat-chip
      *ngFor="let chip of availableItems; index as idx"
      [selected]="selectedItems.indexOf(idx) > -1"
      (click)="select(idx)">
    {{chip}}
  </mat-chip>
</mat-chip-list>

// index.js
import {Component, ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'chips-stacked-example',
  templateUrl: 'chips-stacked-example.html',
  styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
  constructor(private cdr: ChangeDetectorRef) {}
  availableItems = ['foo', 'bar', 'baz'];
  selectedItems = [];
  select(idx) {
    console.log('selecting', idx);
    this.selectedItems.push(idx);
    //this.cdr.detectChanges()
  }
}

最佳答案

您忘记添加multiple属性：

<mat-chip-list multiple>