无法更改 Angular 2 Material Mat Chip 选择状态答案

【问题标题】：Can't change Angular2 Material MatChip selected state无法更改 Angular 2 Material Mat Chip 选择状态
【发布时间】：2018-04-23 11:08:26
【问题描述】：

如何更改MatChip选中的属性？我不想单击以选择/取消选择芯片（也必须更改芯片颜色。）我尝试了什么：

html:

<mat-chip-list>
   <mat-chip *ngFor="let label of item.labels" 
             #lbl (click)="selectChip(lbl)">
      {{label}}
   </mat-chip>
</mat-chip-list>

ts：

selectChip(item: MatChip) {
   item.selected ? item.deselect() : item.select();
}

点击它会抛出

ERROR TypeError: item.select is not a function

如何解决？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

如果你使用这个html（请注意#lbl="matChip"）：

<mat-chip-list>
   <mat-chip *ngFor="let label of item.labels" 
             #lbl="matChip" (click)="selectChip(lbl)">
      {{label}}
   </mat-chip>
</mat-chip-list>

您的selectChip 方法将收到一个 MatChip，然后您可以执行以下操作：

selectChip(item: MatChip) {
   item.toggleSelected();
}

【讨论】：

【解决方案2】：

没有 select() 或 deselect() 方法，只有选定的 getter 和 setter 函数，所以你可以这样解决：

selectChip(item: MatChip) {
   item.selected = !item.selected;
}

希望这会有所帮助。

【讨论】：