如何在Angular Material select选中后在输入框展示id、device等附加数据

实现方案 #

你可以通过 Angular Material 提供的 mat-select-trigger 自定义选中态的展示内容，同时保持下拉选项仅展示名称，具体修改步骤如下： #

步骤1：修改选中值绑定逻辑 #

首先将 mat-option 的值绑定从单个name字段改为整个sensor对象，方便选中后读取附加字段：

<mat-option
  *ngFor="let sensor of sensors | filter: sensorFilter.value"
  [value]="sensor"
>
  {{ sensor?.name | translate }}
</mat-option>

步骤2：自定义选中态展示内容 #

在mat-select标签内部添加mat-select-trigger节点，该节点内的内容仅会在选中后展示在输入框区域，不会影响下拉选项的展示：

<mat-select required formControlName="sensorId">
  <!-- 新增自定义选中触发器，替换yourFormGroup为你自己的表单组变量名即可 -->
  <mat-select-trigger *ngIf="yourFormGroup.get('sensorId').value as selectedSensor">
    ID: {{ selectedSensor.id }} | 设备: {{ selectedSensor.device }} | {{ selectedSensor.name | translate }}
  </mat-select-trigger>

  <!-- 原有搜索框和下拉选项逻辑保持不变 -->
  <mat-form-field class="w-100">
    <mat-label>
      <em class="fa fa-search f-20"></em>
    </mat-label>
    <input matInput #sensorFilter />
  </mat-form-field>
  <mat-option
    *ngFor="let sensor of sensors | filter: sensorFilter.value"
    [value]="sensor"
  >
    {{ sensor?.name | translate }}
  </mat-option>
</mat-select>

补充说明 #

如果你的表单sensorId控件原本仅需要存储id值，可以在表单提交时通过this.yourFormGroup.get('sensorId').value.id获取对应id，也可以自定义[compareWith]方法实现值的匹配，示例：

1. 在ts文件中添加比较函数

compareSensor(o1: any, o2: any): boolean {
  return o1 && o2 ? o1.id === o2.id : o1 === o2;
}

2. 在mat-select上绑定比较函数

<mat-select required formControlName="sensorId" [compareWith]="compareSensor">

你可以根据排版需要调整mat-select-trigger内的内容样式，比如调整分隔符、增加间距等匹配预期的展示效果。 #

内容的提问来源于stack exchange，提问作者Guru Prakash Ram