Angular Material 15.4.9版本autocomplete组件报错求助

报错的核心原因有两个：

1. MatAutocompleteModule未在NgModule中导入：Angular Material组件需要在组件所属的模块（而非仅组件文件）的imports数组中声明，编译器才能识别mat-autocomplete元素和matAutocomplete导出指令。
2. 输入框未关联自动完成组件：模板中的input标签缺少[matAutocomplete]="auto"属性，无法和mat-autocomplete建立关联。

步骤1：在组件所属模块中导入必要的Material模块 #

找到ProjectsComponent所在的模块文件（比如projects.module.ts或app.module.ts），添加以下导入并加入imports数组：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入所需的Angular Material模块
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
// 导入响应式表单模块（因为用了FormControl）
import { ReactiveFormsModule } from '@angular/forms';

import { ProjectsComponent } from './projects.component';

@NgModule({
  declarations: [ProjectsComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule
  ]
})
export class ProjectsModule { }

步骤2：修改模板，关联输入框和自动完成组件 #

在projects.component.html的input标签中添加[matAutocomplete]="auto"属性，同时修正mat-option的数据源（当前用的options未定义，应该用你声明的filteredProjects$）：

<div class="filter-project-section">
  <mat-form-field appearance="outline" style="flex:1" class="filter-form">
    <mat-label>Filter</mat-label>
    <!-- 添加[matAutocomplete]="auto"关联自动完成组件 -->
    <input matInput [formControl]="searchControl" [matAutocomplete]="auto">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
 
  <mat-autocomplete #auto="matAutocomplete">
    <!-- 替换options为filteredProjects$，并异步订阅 -->
    <mat-option *ngFor="let project of filteredProjects$ | async" [value]="project.name">
      {{project.name}}
    </mat-option>
  </mat-autocomplete>
</div>

步骤3：补充filter方法（如果尚未实现） #

在ProjectsComponent中完善filter方法，用于根据搜索值过滤项目：

private filter(value: string): Observable<Project[]> {
  const filterValue = value.toLowerCase();
  return this.projects$.pipe(
    map(projects => projects.filter(project => 
      project.name.toLowerCase().includes(filterValue)
    ))
  );
}

Angular 15.x版本的Material组件导入规则和新版本一致，但必须确保模块层级的导入正确——仅在组件文件中import模块不会让Angular编译器识别组件，必须在NgModule的imports中注册。

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