Angular Material对话框无法使用*ngFor、ngModel报NG0303错误

你遇到的NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'div'错误、以及对话框内*ngFor、ngModel等指令无法使用的问题，核心原因有两个：

• 对话框组件未在模块中声明：当前AppModule的declarations数组中，没有加入你这个承载对话框内容的自定义组件。Angular 传统 NgModule 开发模式下，所有自定义组件必须加入所属模块的declarations列表，否则模块中导入的CommonModule（提供*ngFor等内置指令）、FormsModule（提供ngModel指令）无法对这个组件的模板生效，就会报指令无法识别的错误。
• 模板DOM结构非法：<select>下拉标签内部只允许嵌套<option>、<optgroup>标签，你当前在select内部写<div>渲染选项本身不符合HTML规范，就算指令正常解析也无法得到预期的下拉效果。

1. 将对话框组件加入AppModule的declarations数组
   首先在app.module.ts顶部引入你的对话框组件，再把组件类名加到declarations列表中，示例修改如下：

   // 顶部引入你的对话框组件，路径替换为实际文件路径
   import { ShipmentDialogComponent } from './shipment-dialog/shipment-dialog.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       UsersComponent,
       LoginComponent,
       CompaniesComponent,
       OfficesComponent,
       ShipmentsComponent,
       ShipmentDialogComponent // 新增对话框组件声明
     ],
     // 其余imports、providers、bootstrap配置保持原有内容即可
     imports: [
       AppRoutingModule,
       CommonModule,
       FormsModule,
       ReactiveFormsModule,
       BrowserModule,
       FontAwesomeModule,
       RouterModule,
       HttpClientModule,
       BrowserAnimationsModule,
       MatCardModule,
       MatIconModule,
       MatChipsModule,
       MatInputModule,
       MatDialogModule,
     ],
     providers: [
       AuthGuardService,
       AuthService
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 修正对话框模板的下拉框写法
   把select内部的div替换为option标签，将*ngFor绑定在option上，如果需要使用ngModel，修正name属性为对应字段名即可，修改后的模板代码：

   <div mat-dialog-content>
       <form>
           <h1>New Shipment</h1>
           <div class="form-outline mb-4">
               <select #shipmentStatusd name="shipmentStatus" class="form-control">
                   <option *ngFor="let status of shipmentStatuses" [value]="status">{{status}}</option>
               </select>
               <label class="form-label">shipmentStatus</label>
           </div>
       </form>
   </div>
   

修改完成后重新启动编译服务，指令无法识别的错误就会消失，对话框内的内置指令、Material功能都能正常运行。

注：如果你使用的是Angular 14及以上版本，也可以直接将对话框组件设置为独立组件（standalone: true），在组件自身的imports数组中引入需要的CommonModule、FormsModule、MatDialogModule等依赖，就不需要在AppModule中声明该组件。

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