Angular mat-autocomplete问题：选后显名称而非ID且不改[value]绑定

要在保持[value]="freespin.id"的前提下，让输入框选中后显示name而不是id，可以通过自定义displayWith函数根据id反向匹配对应name来实现，无需修改[value]的绑定值。

步骤1：修改模板，添加displayWith绑定 #

给mat-autocomplete组件加上[displayWith]="displayFn"属性：

<mat-form-field>
  <mat-label>Freespin</mat-label>
  <input type="text"
         placeholder="Select a freespin"
         matInput
         formControlName="freespin"
         [matAutocomplete]="auto">
  <mat-autocomplete requireSelection #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let freespin of filteredFreespins[i] | async" [value]="freespin.id">
          {{freespin.name}}
      </mat-option>
  </mat-autocomplete>
</mat-form-field>

步骤2：在组件类中实现displayFn函数 #

确保组件中保存了完整的freespin选项列表（比如allFreespins），然后通过id查找对应的name：

// 假设你的Freespin类型定义
interface Freespin {
  id: number;
  name: string;
}

// 组件中保存所有可用的freespin选项
allFreespins: Freespin[] = [];

// 自定义显示函数
displayFn(id: number): string {
  if (!id) return '';
  // 通过id匹配对应的freespin对象，返回name字段
  const targetFreespin = this.allFreespins.find(item => item.id === id);
  return targetFreespin ? targetFreespin.name : '';
}

原理说明 #

displayWith函数会接收当前表单控件的值（也就是我们绑定的freespin.id），然后返回需要在输入框中展示的文本。这样既保留了提交时发送id的逻辑，又能让输入框显示对应的name字段。

如果你的filteredFreespins是动态加载的，记得在数据加载完成后更新allFreespins列表，确保displayFn能正确匹配到对应的选项。

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