Angular Material Autocomplete无报错但无法工作求助

看起来你遇到的问题很典型，虽然代码结构没问题，但几个容易忽略的细节会导致Autocomplete完全没反应，我帮你梳理几个排查点：

1. 确认模块导入是否完整 #

你提到已经导入了MatAutocompleteModule，但Angular Material的表单组件需要配套模块才能正常工作，而且响应式表单的FormControl也依赖特定模块。请确保你的AppModule里导入了以下所有模块：

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule
  ]
})
export class AppModule { }

缺少ReactiveFormsModule会导致FormControl无法绑定到输入框，而MatFormFieldModule和MatInputModule是mat-form-field和matInput正常工作的基础。

2. 添加手动过滤逻辑（Angular Material 5特性） #

Angular Material 5的Autocomplete不会自动过滤选项，你当前的代码是直接循环testValues，理论上输入时应该显示所有选项，但如果要实现输入过滤，需要手动监听FormControl的变化并过滤数据。修改你的TS代码：

import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...其他代码
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
public filteredOptions: Observable<string[]>;

constructor() {
  this.myControl = new FormControl();
}

ngOnInit() {
  // 监听输入变化，过滤选项
  this.filteredOptions = this.myControl.valueChanges.pipe(
    map(value => this.filter(value))
  );
}

private filter(value: string): string[] {
  const filterValue = value.toLowerCase();
  return this.testValues.filter(option => option.toLowerCase().includes(filterValue));
}

然后修改HTML中的循环部分，使用async管道订阅过滤后的Observable：

<form>
  <mat-form-field>
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
  </mat-form-field>
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let n of filteredOptions | async" [value]="n">
      {{n}}
    </mat-option>
  </mat-autocomplete>
</form>

3. 考虑升级Material版本 #

你使用的@angular/material": "^5.0.0-rc.2"是候选版本，可能存在一些未修复的bug。建议升级到5.x系列的稳定版（比如5.2.5），可以避免一些版本兼容性问题。运行以下命令升级：

npm install @angular/material@5.2.5 --save

按照以上步骤检查后，Autocomplete应该能正常响应输入操作了。

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