Mat-Autocomplete选项仅二次点击或窗口Resize后显示问题求助

1. 手动触发逻辑与组件内置行为冲突 #

你手动绑定了(click)事件调用openPanel，但mat-autocomplete本身已经内置了点击输入框打开面板的逻辑，双重触发可能导致面板状态混乱，出现"面板展开但未渲染选项"的情况。同时，openPanel中先reset控件再立刻打开面板，此时matAutoSolutions的异步数据流可能还未完成更新，导致视图没有同步渲染。

解决办法：

• 优先移除手动绑定的(click)事件，让组件自身处理面板打开：

  <!-- 移除(click)="openPanel(...) 绑定 -->
  <input #solutionInputAuto
      #solutionTrigger="matAutocompleteTrigger"
      (blur)="solutionChange()"
      [formControl]="solutionsControl"
      [matAutocomplete]="solutionAuto"
      type="text"
      placeholder="{{messagesService.solutionsPlaceholder}}"
      aria-label="Solution"
      matInput>
  

• 如果必须保留手动触发逻辑，调整openPanel的执行顺序，等待控件状态更新后再打开面板：

  openPanel(evt: any, trigger: MatAutocompleteTrigger, control: FormControl, input: any): void {
    evt?.stopPropagation();
    control?.reset();
    // 利用微任务等待控件状态更新完成
    Promise.resolve().then(() => {
      trigger?.openPanel();
      input?.nativeElement?.focus();
    });
  }
  

2. ngModel与formControl混用导致状态不一致 #

你同时使用了[(ngModel)]和[formControl]绑定同一个输入框，虽然Angular允许这种写法，但可能导致表单控件的内部状态和视图数据不同步，进而影响mat-autocomplete的渲染逻辑。

解决办法：
统一使用formControl管理输入值，移除ngModel绑定，在组件类中通过控件的valueChanges同步数据到messagesService：

// 组件类中初始化与监听
ngOnInit(): void {
  // 设置初始值
  this.solutionsControl.setValue(this.messagesService.messagesRequest.Solution);
  // 监听值变化同步到服务
  this.solutionsControl.valueChanges.subscribe(value => {
    this.messagesService.messagesRequest.Solution = value;
  });
}

<!-- 移除[(ngModel)]绑定 -->
<input #solutionInputAuto
    #solutionTrigger="matAutocompleteTrigger"
    (blur)="solutionChange()"
    [formControl]="solutionsControl"
    [matAutocomplete]="solutionAuto"
    type="text"
    placeholder="{{messagesService.solutionsPlaceholder}}"
    aria-label="Solution"
    matInput>

3. 异步数据流未及时触发更新 #

如果matAutoSolutions是基于solutionsControl的valueChanges生成的，当调用control.reset()后，若valueChanges未发出新值（或发出的值未触发数据加载），async管道就不会更新视图，导致选项无法渲染。

解决办法：
确保matAutoSolutions在控件重置后能正确发出数据流。例如，若你的matAutoSolutions定义如下：

matAutoSolutions = this.solutionsControl.valueChanges.pipe(
  switchMap(value => this.fetchSolutions(value || '')) // 处理空值情况
);

需保证fetchSolutions在传入空值时能返回完整的选项列表，这样重置控件后就能触发数据加载和视图更新。

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