如何让mat-autocomplete点击时展开面板？解决首次需输入才显示问题

问题原因 #

你的代码中，filteredJSONDataOptions 在 ngOnInit 初期就基于空的 options 数组创建了Observable。虽然用了 startWith('') 触发初始过滤，但此时API数据还未加载完成，options 是空数组，过滤后没有结果，导致面板无内容可展示，所以首次点击输入框时面板不会展开。当API数据加载完成后，options 被赋值，但 filteredJSONDataOptions 并未重新触发更新，直到输入字符触发 valueChanges 才会用新的 options 过滤，此时面板才能展开。而离开后再次点击时，options 已经有数据，面板能正常展示。

解决方案 #

方案一：用BehaviorSubject同步数据更新（推荐）

将 options 改为BehaviorSubject，确保过滤逻辑能实时获取最新的数据源：

1. 修改组件类中的变量定义：

private optionsSubject = new BehaviorSubject<Regions[]>([]);
options$ = this.optionsSubject.asObservable(); // 供外部订阅的Observable
filteredJSONDataOptions: Observable<any[]>;
regionForm = new FormControl();

2. 调整API订阅逻辑，将数据发送到BehaviorSubject：

this.subs.add(
  this.regionsSv.getRegions().subscribe(
    (data) => {
      this.optionsSubject.next(data); // 更新数据源
    },
    (err: HttpErrorResponse) => {
      console.log(err);
    }
  )
);

3. 重新创建 filteredJSONDataOptions，结合表单值变化和数据源变化：

import { combineLatest } from 'rxjs';

// ...

ngOnInit(): void {
  this.filteredJSONDataOptions = combineLatest([
    this.regionForm.valueChanges.pipe(startWith('')),
    this.options$
  ]).pipe(
    map(([value, options]) => this.json_data_filter(value, options))
  );
}

4. 修改过滤函数，接收传入的options参数：

json_data_filter(value: string, options: Regions[]): Regions[] {
  const filterValue = value.toLowerCase();
  return options.filter(option => 
    option.name.toLowerCase().includes(filterValue)
  );
}

方案二：手动触发表单值变化

如果不想用BehaviorSubject，可在API数据加载完成后手动触发一次表单值变化，让过滤逻辑重新执行：

this.subs.add(
  this.regionsSv.getRegions().subscribe(
    (data) => {
      this.options = data;
      // 手动触发值变化，更新过滤结果
      this.regionForm.setValue(this.regionForm.value);
    },
    (err: HttpErrorResponse) => {
      console.log(err);
    }
  )
);

额外说明 #

如果尝试过 isOpen 绑定但无效，是因为 isOpen 只是控制面板的显示状态，但如果过滤结果为空，即使设置 isOpen=true，面板也不会有内容展示。核心还是要确保初始过滤时数据源已经加载完成，有可展示的选项。

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