Question

我正在尝试更新芯片的选定属性，但在更改绑定属性时收到ExpressionChangedAfterItHasBeenCheckedError错误

HTML

<mat-chip-list>
          <mat-chip *ngFor="let w of weekDays" [selectable]="true"   color="accent" selected="{{w.value}}" (click)="toggleValue(w)">
            {{w.text}}</mat-chip>

        </mat-chip-list>

组件

 weekDays=[{text:"MON",value:true},{text:"TUE",value:false},{text:"WED",value:false},{text:"THU",value:false},{text:"FRI",value:false},{text:"SAT",value:false},{text:"SUN",value:false}]

 toggleValue(w){
     w.value = !w.value; //Error: ExpressionChangedAfterItHasBeenCheckedError
  }

Answer 1

根据文档，有multiple选项默认为false。

当multiple设置为false时，mat-chip-list的行为类似于一组单选按钮（当选择新的芯片时，将所有其他芯片的选定值更新为false）。这就是导致ExpressionChangedAfterItHasBeenCheckedError。

的原因

https://material.angular.io/components/chips/api

允许设置多个选项：

<mat-chip-list [multiple]="true"> ...

Answer 2

您可以将 ChangeDetectorRef 注入您的组件并手动更新

constructor(private cdr: ChangeDetectorRef) {}

然后，

toggleValue(w){
     w.value = !w.value;
      this.cdRef.detectChanges();
}

选择Angular 2材料垫片更换

2 个答案: