已导入CommonModule仍报Can't bind to 'ngForOf'错误如何解决

可尝试的解决方案如下： #

• 检查CommonModule是否正确加入了所属模块的imports数组。仅写顶部的import导入语句不会生效，必须将CommonModule加入到对应模态模块的@NgModule配置的imports数组中，示例配置：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [你的模态组件名称]
})
export class 你的模态模块名称 { }

• 如果你使用的是Angular14+的独立（standalone）模态组件，需要直接在组件的@Component配置的imports数组中添加CommonModule，独立组件的依赖不受外层模块导入影响，示例配置：

@Component({
  selector: 'app-your-modal',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './your-modal.component.html'
})
export class YourModalComponent {}

• 检查模板语法错误，你当前提供的模板代码里ng-container的闭合标签缺少斜杠，正确写法为</ng-container>，标签不闭合在部分场景下会导致指令解析异常，修正后的模板代码：

<ng-container *ngFor="let school of schools">
   {{school.name}}
</ng-container>

• 检查模态组件是否已在所属模块的declarations数组中声明，如果是通过弹窗库（如Angular Material MatDialog）动态打开的组件，未声明的组件也会出现内置指令不识别的问题。
• 清除本地编译缓存后重试，操作步骤：
  • 删除项目根目录下的.angular缓存文件夹
  • 删除node_modules文件夹和package-lock.json/yarn.lock锁文件
  • 重新执行npm install安装依赖
  • 重启开发服务ng serve

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