Angular Material Multiple Select值为空时能否显示自定义值标签？

• 核心实现逻辑是通过 Angular Material 提供的 mat-select-trigger 指令自定义选择器的触发区域显示内容，完全替代默认的选中值展示逻辑，不受组件空值状态限制。

1. 组件模板代码示例 #

<mat-select [formControl]="selectedOptions" multiple>
  <!-- 自定义触发器，空值时显示View All -->
  <mat-select-trigger>
    {{ selectedOptions.value?.length ? selectedOptions.value.join(', ') : 'View All' }}
  </mat-select-trigger>
  <!-- 全选复选框选项 -->
  <mat-option (click)="toggleAllSelection()">
    <mat-checkbox [checked]="isAllSelected()" [indeterminate]="isIndeterminate()">
      全选/取消全选
    </mat-checkbox>
  </mat-option>
  <!-- 普通选项遍历 -->
  <mat-option *ngFor="let option of optionList" [value]="option">
    {{ option }}
  </mat-option>
</mat-select>

2. 组件类逻辑示例 #

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

// 组件类内部代码
optionList: string[] = ['选项1', '选项2', '选项3', '选项4'];
selectedOptions = new FormControl<string[]>([]);

// 全选切换逻辑
toggleAllSelection() {
  if (this.isAllSelected()) {
    this.selectedOptions.setValue([]);
  } else {
    this.selectedOptions.setValue([...this.optionList]);
  }
}

// 判断是否全选
isAllSelected(): boolean {
  return this.selectedOptions.value?.length === this.optionList.length;
}

// 判断半选状态
isIndeterminate(): boolean {
  const selectedLen = this.selectedOptions.value?.length || 0;
  return selectedLen > 0 && selectedLen < this.optionList.length;
}

注意事项 #

• 无需配置placeholder属性，自定义触发器的优先级高于默认的占位符和选中值展示逻辑，空值状态下会稳定显示你设置的View All文本
• 如果需要同时显示选中数量，可自行修改mat-select-trigger内的展示逻辑，比如改为${selectedOptions.value.length} 项已选中的格式

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