选择了 Angular 2 材料垫片更改答案

【问题标题】：Angular 2 material mat-chip change selected选择了 Angular 2 材料垫片更改
【发布时间】：2018-05-05 15:40:10
【问题描述】：

我正在尝试更新芯片的选定属性，但更改绑定属性时出现 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
  }

【问题讨论】：

标签： angular angular-material

【解决方案1】：

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

当multiple设置为false时，mat-chip-list将表现出一组单选按钮（在选择新的一个新的单选按钮时（更新所有其他芯片的所选值）。这就是导致 ExpressionChangedAfterItHasBeenCheckedError 的原因。

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

允许设置多个选项：

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

【讨论】：

【解决方案2】：

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

constructor(private cdr: ChangeDetectorRef) {}

然后，

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

【讨论】：

谢谢，这似乎成功了。但不符合预期。即使所有单击的项目的值=true，也只选择了我单击的最后一个芯片（颜色=重音）。是否允许选择多个芯片？
我认为您的逻辑似乎有问题
我认为逻辑没有问题，因为它会正确更新列表，这意味着我有多个项目的列表，其值为 true，但 ui 仅显示选择了一个芯片。
是否可以选择多个芯片？如果是，我的逻辑有什么问题？
让它工作它需要 [multiple]="true" 在 mat-chat-list 中允许多项选择。