Angular 6中Angular Material的mat-option报ngForOf绑定错误求助

嘿，这个问题我之前也碰到过！其实错误提示已经给出了关键线索——Can't bind to 'ngForOf' since it isn't a known property of 'mat-option'，这并不是Angular Material组件的问题，而是Angular的结构型指令依赖模块缺失导致的。

问题原因 #

*ngFor（底层是ngForOf指令）属于Angular的CommonModule提供的核心指令，所有需要使用*ngFor、*ngIf这类结构型指令的模块，都必须显式导入CommonModule。你的MaterialModule只导入了Material组件，但没有包含CommonModule，如果你的业务组件所在的模块只导入了MaterialModule，就会出现这个错误。

两种解决方案 #

方案1：在业务组件所在模块导入CommonModule

如果你只是在某个特定模块（比如AppModule或者自定义功能模块）里使用这些组件，直接在该模块的imports数组中添加CommonModule即可：

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MaterialModule } from './material.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule, // 新增这行
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案2：在MaterialModule中集成CommonModule

如果你的项目中有多个模块都要使用Material组件和结构型指令，更高效的方式是把CommonModule加入到MaterialModule的imports和exports中，这样所有导入MaterialModule的模块都能自动使用CommonModule的指令：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 导入CommonModule
import { MatButtonModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    CommonModule, // 添加到imports
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule
  ],
  exports: [
    CommonModule, // 添加到exports，让其他模块能继承使用
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule
  ]
})
export class MaterialModule {}

验证修改 #

做完以上修改后，重启你的Angular开发服务（ng serve），模板中的*ngFor就能正常工作了，错误应该会消失。

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