Angular Material Autocomplete：如何基于字符串输入设置初始选中值？

你的问题核心在于：Autocomplete的选项值是对象类型，但输入框绑定的是字符串，默认匹配逻辑无法将字符串与对象对应，导致首次打开下拉时无法选中对应选项。下面提供两种解决方案，优先推荐官方规范的实现方式：

方案一：绑定对象值 + 使用displayWith控制显示（推荐） #

这是Angular Material官方推荐的用法，让表单控件存储完整的选项对象，通过displayWith函数指定输入框要显示的字符串，既解决初始选中问题，也避免显示[Object object]的问题。

实现步骤： #

1. 定义表单控件时指定类型为选项对象（或null）
2. 在ngOnInit中从options列表找到与初始字符串匹配的对象，设置为控件初始值
3. 配置displayWith函数，返回对象中需要显示的属性值

HTML代码：

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TypeScript代码：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

interface User {
  name: string;
}

@Component({
  selector: 'autocomplete-display-example',
  templateUrl: 'autocomplete-display-example.html',
})
export class AutocompleteDisplayExample implements OnInit {
  myControl = new FormControl<User | null>(null);
  options: User[] = [
    { name: 'Mary' },
    { name: 'Shelley' },
    { name: 'Igor' }
  ];

  ngOnInit(): void {
    // 匹配初始字符串对应的选项对象
    const initialOption = this.options.find(opt => opt.name === 'Shelley');
    this.myControl.setValue(initialOption);
  }

  // 控制输入框显示的内容
  displayFn(user: User | null): string {
    return user ? user.name : '';
  }
}

方案二：保留字符串值，解决代码选中导致下拉关闭的问题 #

如果必须让输入框存储字符串，可以通过延迟执行选中逻辑并重新打开下拉框，解决代码选中后下拉关闭的问题：

实现步骤： #

1. 获取Autocomplete的实例引用
2. 在opened事件中延迟查找并选中对应选项，之后重新打开下拉框

HTML代码：

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (opened)="onAutocompleteOpened()">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TypeScript代码：

import { Component, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete } from '@angular/material/autocomplete';

interface User {
  name: string;
}

@Component({
  selector: 'autocomplete-display-example',
  templateUrl: 'autocomplete-display-example.html',
})
export class AutocompleteDisplayExample {
  myControl = new FormControl('Shelley');
  options: User[] = [
    { name: 'Mary' },
    { name: 'Shelley' },
    { name: 'Igor' }
  ];
  @ViewChild('auto') autocomplete!: MatAutocomplete;

  onAutocompleteOpened(): void {
    // 延迟执行，避免触发默认关闭逻辑
    setTimeout(() => {
      const targetOption = this.autocomplete.options.find(opt => opt.value.name === this.myControl.value);
      if (targetOption) {
        targetOption.select();
        // 重新打开下拉框
        this.autocomplete.open();
      }
    }, 0);
  }
}

注意：方案二属于妥协性实现，长期维护推荐使用方案一，更符合组件的设计逻辑。

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