Angular Material mat-select多选如何仅显示首个选中值及剩余计数

核心思路 #

利用Angular Material提供的mat-select-trigger自定义触发器模板，直接重写选择框顶部的展示逻辑，无需修改组件默认多选行为。

实现步骤 #

1. 组件类中定义绑定数据 #

示例代码：

import { FormControl } from '@angular/forms';

// 组件类内部
// 多选绑定的FormControl，也可以用ngModel实现双向绑定
selectedOptions = new FormControl<string[]>([]);
// 下拉选项列表，支持字符串或对象类型
optionList = ['选项A', '选项B', '选项C', '选项D'];

2. 模板中自定义触发区展示 #

示例代码：

<mat-select [formControl]="selectedOptions" multiple placeholder="请选择">
  <!-- 自定义选择后顶部展示的内容 -->
  <mat-select-trigger>
    <!-- 展示首个选中项，若选中项为对象则取对应展示字段，如 selectedOptions.value[0].label -->
    {{ selectedOptions.value?.[0] ?? '' }}
    <!-- 选中数量大于1时展示剩余计数 -->
    <span *ngIf="selectedOptions.value?.length > 1" class="select-count">
      +{{ selectedOptions.value.length - 1 }}
    </span>
  </mat-select-trigger>

  <!-- 下拉选项渲染 -->
  <mat-option *ngFor="let option of optionList" [value]="option">
    {{ option }}
  </mat-option>
</mat-select>

3. 可选样式优化 #

可以给计数标签添加自定义样式调整展示效果：

.select-count {
  margin-left: 4px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

扩展说明 #

• 若使用ngModel绑定选中值，只需要把[formControl]替换为[(ngModel)]="selectedOptions"即可，展示逻辑完全一致
• 未选中状态下会自动展示mat-select设置的placeholder内容，无需额外处理

内容的提问来源于stack exchange，提问作者Ayush Bisht