Angular Material Autocomplete筛选：选择选项后输入框显示fullName而非personId

这个问题很常见，核心原因是你把mat-option的[value]绑定到了personId，而Autocomplete默认会把选中的value直接显示在输入框里。要实现输入框显示fullName，同时FormControl存储personId的需求，只需要借助Autocomplete的displayWith属性就可以搞定，下面是具体步骤：

方案一：保持FormControl存储personId（推荐，适配你的现有代码） #

1. 在组件类中添加显示文本的处理函数 #

这个函数会接收FormControl当前的值（也就是选中的personId），返回对应的fullName用于输入框显示：

displayFn(personId: string): string {
  // 如果没有选中值，返回空字符串
  if (!personId) return '';
  // 从你的人员列表中找到匹配的对象
  const matchedPerson = this.from.find(person => person.personId === personId);
  // 返回名称或者空（防止找不到的情况）
  return matchedPerson ? matchedPerson.fullName : '';
}

2. 修改HTML中的Autocomplete组件 #

给mat-autocomplete加上[displayWith]="displayFn"属性，指定用我们刚才写的函数来渲染输入框的显示文本：

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let c of from" [value]="c.personId">
    {{ c.fullName }}
  </mat-option>
</mat-autocomplete>

这样修改后，选中选项时：

• FormControl仍然会存储personId（满足你的业务数据需求）
• 输入框会显示对应的fullName（用户友好）

方案二：让FormControl存储整个人员对象 #

如果你的业务逻辑允许FormControl存储完整的人员对象，也可以用这种方式，代码更简洁：

1. 调整FormControl的类型 #

// 明确指定FormControl的值类型为人员对象或null
fromControl = new FormControl<{personId: string, fullName: string} | null>(null, [Validators.required]);

// 调整displayFn来处理人员对象
displayFn(person?: {personId: string, fullName: string}): string {
  return person ? person.fullName : '';
}

2. 修改mat-option的value绑定 #

把[value]绑定为整个人员对象：

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let c of from" [value]="c">
    {{ c.fullName }}
  </mat-option>
</mat-autocomplete>

之后你要获取personId的话，只需要通过this.fromControl.value?.personId即可。

两种方案都能解决你的问题，你可以根据自己的业务需求选择合适的方式~

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