Angular Material自动补全组件中使用ngValue的问题求助

问题回顾 #

你在使用Angular Material自动完成组件时，为了传递对象类型的选项值选择了[ngValue]而非[value]，但遇到了模板解析错误：

模板解析错误：无法绑定到'ngValue'，因为它不是'mat-option'的已知属性。

1. 如果'mat-option'是Angular组件且具有'ngValue'输入，请确认它已包含在当前模块中。
2. 如果'mat-option'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'中以抑制此消息。
3. 若要允许任意属性，请将'NO_ERRORS_SCHEMA'添加到该组件的'@NgModule.schemas'中。

你的核心HTML代码如下：

<mat-input-container fxFlex="18" fxFlexOffset="1"> 
 <input matInput placeholder="Example" [matAutocomplete]="autocomplete" [ngModel]="user?.UserName" (ngModelChange)="filter($event)" [disabled]="disabled"/> 
 <mat-autocomplete #autocomplete="matAutocomplete" (optionSelected)="optionSelected($event)" > 
 <mat-option *ngFor="let selectedUser of availableUsers" [ngValue]="selectedUser"> 
 <span>{{ selectedUser?.UserName }}</span> 
 </mat-option> 
 </mat-autocomplete> 
</mat-input-container>

你已经尝试了社区中提到的模块导入方案，但错误依然存在，下面是针对性的解决建议：

分步解决方案 #

1. 先确认Forms模块已导入

很多人会忽略：[ngValue]不是Angular Material提供的属性，而是Angular核心Forms模块的指令！所以必须在使用该组件的模块（或共享模块）中导入FormsModule或ReactiveFormsModule：

import { FormsModule } from '@angular/forms';
// 如果你用的是响应式表单，就导入ReactiveFormsModule
// import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ... 其他已导入的模块
    FormsModule,
    // ReactiveFormsModule（按需选择）
  ],
  // ...
})
export class YourFeatureModule { }

2. 检查Material模块的导入与导出逻辑

确保MatAutocompleteModule和MatInputModule被正确导入并导出：
如果你用了共享的material-module.ts，需要保证该模块不仅导入这些组件，还把它们导出，这样其他功能模块导入MaterialModule时才能访问到这些组件：

// material-module.ts
import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatAutocompleteModule,
    MatInputModule
  ],
  exports: [
    MatAutocompleteModule,
    MatInputModule
  ]
})
export class MaterialModule { }

之后在你的功能模块中，记得同时导入MaterialModule和上面提到的Forms模块。

3. 验证Angular与Material版本兼容性

版本不匹配也会导致这类奇怪的属性绑定错误。打开package.json，确认@angular/core和@angular/material的主版本号一致（比如都是14.x、15.x），如果不一致，执行对应版本的更新命令：

npm install @angular/material@<你的Angular版本号> @angular/cdk@<你的Angular版本号>

4. 别用NO_ERRORS_SCHEMA“掩盖”问题

错误提示里提到的NO_ERRORS_SCHEMA只能暂时隐藏错误，无法真正解决[ngValue]无法工作的问题，反而会埋下后续调试的隐患，强烈建议不要使用这种方式。

按照这些步骤调整后，[ngValue]应该能正常绑定到mat-option上，实现对象值的传递了。

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