如何完全重置带有mat-autocomplete的mat-input组件

嘿，我刚看完你的问题，这两个小坑确实是用Angular Material的autocomplete时容易碰到的，咱们一个个来解决：

问题1：重置后无法自动显示建议面板 #

这个问题的核心是重置操作没有触发自动完成面板的打开，同时过滤后的数据源也没正确更新。当你调用reset()清空表单控件后，虽然输入框的值没了，但autocomplete的面板不会自动弹出来，而且如果你的filteredOptions是依赖valueChanges的，重置可能没触发这个流的更新。

给你个具体的实现方案：

1. 先在模板里给mat-autocomplete加个模板引用变量，方便咱们在组件里调用它的方法：

<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="handleOptionSelected($event)">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{ option }}
  </mat-option>
</mat-autocomplete>

2. 在组件里，咱们要在重置时手动触发面板打开，同时重置过滤后的数据源：

import { ViewChild } from '@angular/core';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { of } from 'rxjs';

// 组件内的属性
@ViewChild('auto') autocomplete!: MatAutocomplete;
myControl = new FormControl('');
filteredOptions!: Observable<string[]>;
originalOptions: string[] = []; // 用来存异步获取到的原始数据

// 初始化时获取异步数据并设置过滤流
ngOnInit() {
  this.loadAsyncData().subscribe(data => {
    this.originalOptions = data;
    this.setupFilter();
  });
}

private setupFilter() {
  this.filteredOptions = this.myControl.valueChanges.pipe(
    startWith(''),
    map(value => this._filter(value))
  );
}

private _filter(value: string): string[] {
  const filterTerm = value.toLowerCase();
  return this.originalOptions.filter(opt => opt.toLowerCase().includes(filterTerm));
}

// 处理选项选中后的重置逻辑
handleOptionSelected(event: MatAutocompleteSelectedEvent) {
  // 先做你需要的选中逻辑，比如获取选中值
  const selectedValue = event.option.value;
  
  // 开始重置
  this.myControl.reset();
  // 重置过滤流为原始数据，这样面板会显示所有选项
  this.filteredOptions = of(this.originalOptions);
  // 手动打开面板
  this.autocomplete.openPanel();
}

这样重置后，面板会直接弹出来显示所有建议，不用再失焦重聚焦啦。

问题2：失焦再聚焦时，面板残留mat-selected类 #

这个是因为Angular Material的autocomplete会记住上一次选中的选项状态，即使你清空了输入值，它还是会把之前选中的选项标记为mat-selected。咱们需要在重置或者输入框聚焦时，手动清除这个选中状态。

在刚才的重置方法里加上这一行就行：

handleOptionSelected(event: MatAutocompleteSelectedEvent) {
  // ... 之前的逻辑
  this.myControl.reset();
  this.filteredOptions = of(this.originalOptions);
  // 清除autocomplete的活跃选中状态
  this.autocomplete.activeOption = null;
  this.autocomplete.openPanel();
}

另外，为了覆盖“未输入内容时失焦再聚焦”的场景，咱们给输入框加个focus事件处理：

<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" (focus)="onInputFocus()">

然后在组件里实现这个方法：

onInputFocus() {
  if (!this.myControl.value) {
    // 当输入框为空且聚焦时，清除选中状态
    this.autocomplete.activeOption = null;
    // 同时确保过滤流显示所有原始选项
    this.filteredOptions = of(this.originalOptions);
  }
}

这样不管是选中后重置，还是空输入框聚焦，都不会再出现红色背景的残留选中状态了。

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