Angular 9 Mat-select 非多选场景下选项值逗号分隔展示问题咨询

完全可以实现，无需开启多选功能，核心是通过 Angular Material 提供的 mat-select-trigger 自定义触发器模板，重写选择框默认展示的内容即可，具体实现步骤如下：

1. 组件内定义选项数据源 #

示例代码：

// 组件类 ts 代码
// 定义选项列表，可根据业务调整为对象数组格式
selectOptions: string[] = ['选项1', '选项2', '选项3', '选项4'];
// 单选绑定值
selectedValue: string = '';

2. 模板中自定义选择器展示内容 #

保持 mat-select 默认单选模式，插入 mat-select-trigger 标签重写展示逻辑：

<mat-select [(ngModel)]="selectedValue" placeholder="请选择">
  <!-- 自定义触发器：展示所有选项逗号分隔 -->
  <mat-select-trigger>
    {{ selectOptions.join(', ') }}
  </mat-select-trigger>
  <!-- 正常渲染选项 -->
  <mat-option *ngFor="let option of selectOptions" [value]="option">
    {{ option }}
  </mat-option>
</mat-select>

可选适配调整 #

• 如果选项为对象数组，修改拼接逻辑即可，例：选项格式为 {label: string, value: number} 时，触发器内写 {{ selectOptions.map(item => item.label).join(', ') }}
• 内容过长时可给触发器加自定义样式，添加 text-overflow: ellipsis 实现溢出省略效果
• 需要同时展示选中值时，可在触发器内额外补充 (当前选中: {{selectedValue}}) 类的标注内容

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