在具有多个属性的 Angular Material 选择元素中显示自定义“值”

Question

我正在尝试使用多个选项创建一个有角度的 MatSelect 输入，如下所示：

<mat-select
  [formControl]="selectedValues"
  multiple
  (selectionChange)="updateSelectionLabel()"
>
  <mat-option *ngFor="let item of items" [value]="item" >
    {{ item }}
  </mat-option>
</mat-select>

选择多个项目时，UI 中会显示所选项目的列表：

item 1, item 2, it...

我的列表中的所有项目都有相似的名称，所以我宁愿显示一个字符串：

XX items selected

有没有办法用 Material Angular 来做到这一点？据我所知，您需要设置

MatSelect.triggerValue

，但这似乎是一个现成的属性。 谢谢

Answer 1

我在docs中错过了如何执行此操作的示例。这是给出的示例的现场演示：

https://stackblitz.com/angular/ovarbapvvdd?file=app%2Fselect-custom-trigger-example.ts

Answer 2

是的。 这些是 [mat-select-trigger]，允许您在模板中自定义值。

示例如下： https://material.angular.io/components/select/overview#customizing-the-trigger-label

以及API： https://material.angular.io/components/select/api#MatSelectTrigger