如何程序化设置mat-select控件的显示文本？（附示例项目）

当然可以实现，直接用Angular Material的displayWith属性就能自定义选中项的显示文本，具体操作如下：

1. 组件类中添加映射关系和显示函数 #

在你的组件文件（比如select-overview-example.ts）里，先定义原选项文本和目标显示文本的映射，再写一个处理显示逻辑的函数：

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

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
  toppings = new FormControl('');
  toppingList: string[] = ['one', 'two'];
  
  // 定义选项与显示文本的映射
  private optionMap: Record<string, string> = {
    'one': '1',
    'two': '2'
  };

  // 自定义显示逻辑的函数
  displaySelected(selected: string[] | null): string {
    if (!selected || selected.length === 0) {
      return '';
    }
    // 将选中项转换为目标文本并拼接
    return selected.map(item => this.optionMap[item]).join(', ');
  }
}

2. 模板中绑定displayWith属性 #

在mat-select标签上添加[displayWith]="displaySelected"，让控件使用我们自定义的显示逻辑：

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple [displayWith]="displaySelected">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

这样设置后，选中"one"时控件会显示"1"，同时选中"one"和"two"时就会显示"1, 2"，完全符合你的需求。

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