无法select Angular Material chip/chips 表示此芯片已经selected？

Question

我无法实现芯片选择并提示用户已选择该芯片

我有以下 html 模板代码：

<mat-chip-list [multiple]="true" [selectable]="true">
  <mat-chip selected (selectionChange)="onSelectedChip($event)" [selectable]="true"  *ngFor="let size of sizes | sizeEnumToSize">{{ size }}</mat-chip>
</mat-chip-list>

最初我只是想让所有芯片都处于选中状态。我希望芯片能够在视觉上改变其状态以向用户显示它已被选中。我也尝试过 [selected]="true" 但这会产生与预期相同的正常列表。

我在这里错过了什么？

Answer 1

您的观察是正确的：仅使用 [selectable]="true" 无法指示是否选择了单个芯片。我想，你需要一个 boolean 值来指示每个芯片的状态。

类似于：

// TS
sizes = [{ selected: true, name: 'Foo' }, { selected: true, name: 'Bar' }];

// HTML
<mat-chip-list [multiple]="true" [selectable]="true">
  <mat-chip *ngFor="let size of sizes"
            [selected]="size.selected"
            (click)="size.selected = !size.selected">{{size.name}}</mat-chip>
</mat-chip-list>

无法select Angular Material chip/chips 表示此芯片已经selected？

Unable to select Angular Material chip/chips and indicate that this chip has been selected?

angular

angular-material2