Angular Material mat-select - 显示计数以及多项选择中的第一个选定值

Question

在 mat-select 多选中，所有选择的值都显示在选择字段中。 如果选择了多个值，我只想要第一个选择的值以及 +1 或 +2 等。

Answer 1

您可以使用<mat-select-trigger>自定义所选值的显示输出。

<mat-select [formControl]="toppings" multiple>
  <mat-select-trigger>
    {{toppings.value ? toppings.value[0] : ''}}
    <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
      +{{toppings.value.length - 1}}
    </span>
  </mat-select-trigger>
  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

.example-additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

StackBlitz 上的示例解决方案

---

参考

选择 | 角度材质（部分：使用自定义触发文本选择）