Angular9响应式表单中mat-select如何获取选中项的显示文本而非绑定值

当前场景下，表单的category字段通过formControlName绑定了mat-select的选中值，且选项值直接取的是option.id，因此直接读myForm.value.category只能拿到id值，无法直接获取选项的展示文本。可以通过以下两种不改动原有表单绑定逻辑的方式实现需求：

方案1：通过选中id匹配本地categories数组映射文本 #

这是改动量最小的实现方式，不需要调整现有模板和已经写好的表单结构，依托本来就存在的全量选项数组做查表匹配即可。

• 在组件类中定义一个只读计算属性，实时根据当前表单的选中值返回对应的展示文本：

get selectedCategoryLabel(): string {
  const selectedCategoryId = this.myForm.get('category')?.value;
  if (selectedCategoryId === null || selectedCategoryId === undefined) {
    return '';
  }
  // 从本地已加载的categories数组中匹配对应id的选项
  const matchedOption = this.categories.find(item => item.id === selectedCategoryId);
  return matchedOption ? matchedOption.name : '';
}

• 在表单区域外的模板位置直接通过插值调用这个属性，即可实时展示选中项的文本：

<!-- 表单外部的展示区域 -->
<div>选中分类：{{ selectedCategoryLabel }}</div>

这种方案的优势是完全不破坏原有表单的取值逻辑，表单提交时依然可以直接拿到绑定的id值，不需要额外做取值转换。

方案2：通过mat-select选中变更事件缓存展示文本 #

如果categories数组体量较大，每次变更检测都触发数组查找会带来不必要的性能开销，可以通过事件回调在选中值变化时提前把文本缓存下来。

• 模板中给mat-select绑定自带的selectionChange事件：

<mat-select 
  formControlName="category" 
  (selectionChange)="handleCategorySelect($event)">
  <mat-option *ngFor="let item of categories" [value]="item.id">
    {{ item.name }}
  </mat-option>
</mat-select>

• 组件类中定义独立变量存储缓存的文本值，在事件回调中做匹配更新：

// 缓存的选中分类展示文本
cachedCategoryLabel = '';

handleCategorySelect(event: MatSelectChange) {
  const selectedId = event.value;
  const matched = this.categories.find(item => item.id === selectedId);
  this.cachedCategoryLabel = matched ? matched.name : '';
}

• 模板外部展示位置直接读取这个缓存变量即可：

<div>选中分类：{{ cachedCategoryLabel }}</div>

常见踩坑注意事项 #

• 不要为了获取展示文本直接修改mat-select的绑定值逻辑，比如把[value]="item.id"改成[value]="item"直接绑定整个选项对象，这种改法会让表单的选中值变成复杂对象，后续表单提交、值校验的逻辑都要跟着做适配，大幅增加改造量。
• 数组匹配时要注意id的类型一致性：如果categories中的id是数字类型，表单的初始值、重置值也要传同类型的id值，避免因为类型不匹配（比如数字和字符串的严格相等判断失效）导致匹配不到对应文本。

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