Angular Material autocomplete 初次选中API字段不展示选项如何解决

问题原因 #

你遇到的现象是异步数据源加载时序导致的：

• 初始化filteredDMOptions过滤流时，API请求还未返回结果，dmOptions是 empty 数组，初始过滤结果为空
• 输入字符再退格时，valueChanges事件被触发，此时dmOptions已经拿到了API返回的全量数据，所以能正常展示选项

修复方案 #

1. 调整过滤流初始化时机 #

将Driver Manager的过滤流初始化逻辑移到API请求成功的回调中，确保dmOptions有值之后再绑定过滤逻辑，同时兼容选中后值为对象的场景，避免调用toLowerCase时报错。

修改后的TS核心代码：

ngOnInit(): void {
  this.initializeForm();
  this.getDriverManagers();

  // 顺带修复Task下拉框的隐性问题：原代码监听的taskControl和表单内的fc_task无关联，改为监听表单控件
  this.filteredTaskOptions = this.sampleForm.get('fc_task').valueChanges.pipe(
    startWith(''),
    map((term) => {
      const searchStr = typeof term === 'string' ? term : term?.name || '';
      return this.taskOptions.filter((task) =>
        task.name.toLowerCase().includes(searchStr.toLowerCase())
      );
    })
  );
}

getDriverManagers() {
  this.mservice.getDriverManagerList().subscribe((data: Drivermanager[]) => {
    this.drivermanagers = data
    this.drivermanagers.sort((a,b) => {
      let fa = a.name.toLowerCase(),
          fb = b.name.toLowerCase();
      if (fa < fb) return -1;
      if (fa > fb) return 1;
      return 0;
    });
    this.dmOptions = this.drivermanagers;
    
    // 数据源加载完成后再初始化过滤流
    const dmControl = this.sampleForm.get('fc_dmanager');
    this.filteredDMOptions = dmControl.valueChanges.pipe(
      startWith(dmControl.value), // 取当前控件值作为初始值，空值时返回全量选项
      map((term) => {
        const searchStr = typeof term === 'string' ? term : term?.name || '';
        return this.dmOptions.filter((dm) =>
          dm.name.toLowerCase().includes(searchStr.toLowerCase())
        );
      })
    );
  })
}

2. 可选优化：点击输入框强制弹出选项 #

如果需要点击输入框时立刻触发全量选项展示，可以给输入框绑定focus事件手动触发校验更新：

<input matInput [matAutocomplete]="autodm" formControlName="fc_dmanager" style="font-size: 14px;" (focus)="sampleForm.get('fc_dmanager').updateValueAndValidity()">

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