Angular中Autocomplete功能失效，如何实现指定数据的自动补全文本框？

看起来你的Autocomplete没正常跑起来，大概率是过滤逻辑没实现或者模块没导入对。我结合你的数据给你一套完整的可运行实现，顺便把常见坑点列出来：

首先是组件的TypeScript代码，这里要处理表单控件的监听和过滤逻辑：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-element-autocomplete',
  templateUrl: './element-autocomplete.component.html'
})
export class ElementAutocompleteComponent {
  // 你的原始元素数据
  Elements = [ 
    { id: 1, name: 'Hydrogen' }, 
    { id: 2, name: 'Helium' }, 
    { id: 3, name: 'Lithium' } 
  ];
  
  // 绑定输入框的表单控件
  name = new FormControl('');
  // 过滤后的选项流，用Observable来实时更新
  filteredElements!: Observable<typeof this.Elements[0][]>;

  ngOnInit() {
    // 初始化过滤逻辑：监听输入变化，实时过滤选项
    this.filteredElements = this.name.valueChanges.pipe(
      startWith(''), // 页面加载时先显示所有选项
      map(inputValue => this._filterElements(inputValue))
    );
  }

  // 核心过滤函数：根据输入值匹配元素名称
  private _filterElements(inputValue: string) {
    const lowerCaseInput = inputValue.toLowerCase();
    return this.Elements.filter(element => 
      element.name.toLowerCase().includes(lowerCaseInput)
    );
  }

  // 选中选项后的回调处理
  elementSelectionChange(event: any) {
    const selectedElement = event.option.value;
    console.log('选中元素:', selectedElement.id, selectedElement.name);
    // 这里可以添加你需要的业务逻辑，比如赋值给组件变量等
  }
}

然后是对应的HTML模板，补全你没写完的部分：

<mat-form-field class="example-full-width">
  <input 
    type="text" 
    placeholder="Pick one" 
    aria-label="Element" 
    matInput 
    [formControl]="name" 
    [matAutocomplete]="auto"
  >
  <mat-autocomplete 
    autoActiveFirstOption 
    #auto="matAutocomplete" 
    (selectionChange)="elementSelectionChange($event)"
  >
    <!-- 注意用async管道订阅过滤后的Observable，遍历显示选项 -->
    <mat-option 
      *ngFor="let element of filteredElements | async" 
      [value]="element"
    >
      {{ element.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

最后一定要检查模块导入，很多人栽在这里！在你的模块文件（比如app.module.ts或者对应feature模块）里必须导入这些：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 必须导入响应式表单模块，否则FormControl会失效
import { ReactiveFormsModule } from '@angular/forms';
// Angular Material相关模块
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

import { ElementAutocompleteComponent } from './element-autocomplete.component';

@NgModule({
  declarations: [ElementAutocompleteComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule
  ],
  exports: [ElementAutocompleteComponent]
})
export class ElementAutocompleteModule { }

关键检查点： #

• 👉 别漏了ReactiveFormsModule：没有它，FormControl根本无法工作，Autocomplete自然没反应
• 👉 用async管道：filteredElements是Observable，必须用async来订阅渲染，不然下拉框里啥都没有
• 👉 过滤逻辑要正确：确保过滤函数是匹配元素的name字段，并且做了大小写不敏感处理（提升用户体验）
• 👉 选项的[value]绑定：这里绑定的是整个element对象，如果你只需要name或者id，可以改成[value]="element.name"或者[value]="element.id"，根据你的业务需求调整

如果之前的errorStateMatcher不是必须的，可以先移除它，等Autocomplete正常工作后再加回去调试。

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