如何让mat-autocomplete下拉框初始化时预选指定选项？

• 问题：下拉框已设置默认值为「Two」，但初始化后打开下拉框，该选项并未处于选中状态
• 当前显示效果：下拉框展开后，所有选项均无选中高亮，「Two」未被标记为选中
• 期望显示效果：下拉框展开后，「Two」选项默认处于选中高亮状态

问题根源在于下拉框绑定的是对象类型选项，默认值的对象引用地址与选项列表中的对应对象不一致，组件无法识别两者为同一选项。通过以下步骤修复：

1. 模板中添加比较函数绑定
   在下拉框标签上添加[compareWith]属性，指定自定义的比较逻辑：

<select [(ngModel)]="selectedItem" [compareWith]="compareOptions">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}</option>
</select>

2. 组件类中定义比较函数
   通过对象的唯一标识（如id）来判断选项是否匹配，而非依赖引用地址：

compareOptions(optA: any, optB: any): boolean {
  return optA && optB ? optA.id === optB.id : optA === optB;
}

3. 确保默认值的标识正确
   初始化selectedItem时，保证其id与选项列表中「Two」的id一致：

selectedItem = { id: 2, name: 'Two' };
items = [
  { id: 1, name: 'One' },
  { id: 2, name: 'Two' },
  { id: 3, name: 'Three' }
];

修改后，组件会通过compareOptions函数识别出默认值对应的选项，打开下拉框时「Two」就会自动处于选中状态。

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