Angular Material Autocomplete(v15)如何高亮选中的下拉选项？

核心问题分析 #

通过代码设置输入框值为"jhon"后，下拉列表未高亮对应选项，本质是FormControl的值未与mat-option的value完成正确匹配，或是下拉列表打开时未触发选中状态同步。

具体修复方案 #

1. 确保FormControl与选项值的匹配逻辑正确 #

如果你的数据源是对象数组（比如包含name属性的用户对象），设置FormControl值时必须传入完整的对象，而非仅字符串：

// 组件内定义数据源
users = [{name: 'jhon'}, {name: 'jane'}, {name: 'bob'}];
// 重置按钮点击事件
resetToJhon() {
  // 找到对应用户对象
  const defaultUser = this.users.find(u => u.name === 'jhon');
  // 通过FormControl设置值，而非直接修改输入框
  this.userControl.setValue(defaultUser);
}

2. 模板层绑定要对应 #

确保HTML中mat-option的[value]与FormControl的绑定逻辑一致：

<input type="text" [formControl]="userControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let user of users" [value]="user">
    {{ user.name }}
  </mat-option>
</mat-autocomplete>
<button (click)="resetToJhon()">重置为Jhon</button>

3. 可选：自动打开下拉并高亮 #

如果需要设置值后自动打开下拉列表并高亮选项，可以调用Autocomplete的open()方法：

import { MatAutocomplete } from '@angular/material/autocomplete';

// 在组件中注入Autocomplete实例
@ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;

resetToJhon() {
  const defaultUser = this.users.find(u => u.name === 'jhon');
  this.userControl.setValue(defaultUser);
  // 延迟调用确保值已同步
  setTimeout(() => {
    this.autocomplete.open();
  });
}

4. 纯字符串数据源的处理 #

如果数据源是纯字符串数组（如['jhon', 'jane', 'bob']），直接设置FormControl值为字符串即可：

users = ['jhon', 'jane', 'bob'];
resetToJhon() {
  this.userControl.setValue('jhon');
  // 可选：打开下拉列表
  setTimeout(() => this.autocomplete.open());
}

5. 对象引用不一致时的兼容处理 #

如果设置的对象与数据源中的对象引用不同（比如从接口获取新对象），需要自定义比较函数来匹配选项：

// 自定义比较函数，通过name属性匹配
compareUsers(u1: any, u2: any): boolean {
  return u1 && u2 ? u1.name === u2.name : u1 === u2;
}

在模板中绑定到mat-autocomplete：

<mat-autocomplete #auto="matAutocomplete" [compareWith]="compareUsers">

关键注意事项 #

• 禁止直接修改输入框的value属性，必须通过**FormControl的setValue/patchValue**更新值，这样Angular Material才能感知变化并同步选中状态。

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