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>

无法选择一个或多个Angular Material芯片并指示已选择该芯片？

1 个答案: