如何在绑定formControlName的mat-select中显示不在mat-option列表内的值

方案1：添加隐藏的专属选项（最简单） #

在下拉循环的选项前新增一个不展示在下拉列表的选项，匹配你需要额外显示的值即可：

<mat-select #objet formControlName="cars" >
  <!-- 额外显示的选项，下拉时隐藏 -->
  <mat-option [value]="extraShowCar" style="display: none;">{{extraShowCar.name}}</mat-option>
  <mat-option *ngFor="let f of listCars" [value]="f">{{f.name}}</mat-option>
</mat-select>

注意：如果绑定的值是对象类型，值匹配需要引用完全一致，若引用不同可以给mat-select加compareWith自定义匹配规则：

<!-- 模板中添加compareWith -->
<mat-select #objet formControlName="cars" [compareWith]="compareCarFn">
  <mat-option [value]="extraShowCar" style="display: none;">{{extraShowCar.name}}</mat-option>
  <mat-option *ngFor="let f of listCars" [value]="f">{{f.name}}</mat-option>
</mat-select>

// 组件ts中添加匹配方法
compareCarFn(a: any, b: any): boolean {
  // 按实际业务的唯一标识匹配即可，比如id
  return a?.id === b?.id;
}

方案2：自定义显示触发器（更灵活） #

直接自定义选择框的显示内容，完全不受下拉选项限制，适合需要自定义展示格式的场景：

<mat-select #objet formControlName="cars" >
  <!-- 自定义显示内容，直接取formControl的值展示 -->
  <mat-select-trigger>
    {{formGroup.get('cars')?.value?.name || '请选择车辆'}}
  </mat-select-trigger>
  <mat-option *ngFor="let f of listCars" [value]="f">{{f.name}}</mat-option>
</mat-select>

注：把上面的formGroup替换成你自己的表单组变量名即可。

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