javascript - mat-chip 的(单击)中的 ExpressionChangedAfterItHasBeenCheckedError

Question

尝试为 mat-chip 的点击事件设置值时，出现 ExpressionChangedAfterItHasBeenCheckedError

我创建了一个 stackblitz 来查看操作中的错误(打开控制台然后单击两个或更多芯片):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()
  }
}

Answer 1

您忘记添加 multiple 属性:

<mat-chip-list multiple>