无法选择 Angular Material 芯片并指示该芯片已被选中？

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>