Angular报Can’t bind to ‘ngForOf’非div已知属性错误解决方法

架构老林

2026-8-30

问题现象

在Angular项目中使用*ngFor指令循环渲染列表时，触发如下报错：

Can't bind to 'ngForOf' since it isn't a known property of 'div'
项目采用多层父子模块拆分结构，根模块app.module.ts已导入BrowserModule，使用*ngFor的子模块也已导入CommonModule，报错依然存在。

核心报错原因

这个报错本质是Angular编译模板时无法识别ngForOf指令，多层模块场景下的常见触发原因如下：

使用*ngFor的组件，没有被正确声明在导入了CommonModule的子模块的declarations数组中，要么漏声明，要么错声明到其他未导入CommonModule的模块，甚至同一个组件被多个模块重复声明。
子模块里CommonModule的导入位置错误，比如放到了declarations、providers数组里，没有放在imports数组中，导入配置根本不生效。
模块嵌套链路异常：使用*ngFor的组件所属的子模块，没有把该组件加入exports数组对外暴露，上层模块调用这个组件时，拿到的是未经过CommonModule编译的版本。
模板里*ngFor本身语法错误，比如漏写前缀*、of拼写成in、指令名大小写错误、漏写let关键字，哪怕模块配置正确也会抛这个错。
如果使用Angular 14+的standalone独立组件，组件本身没在自己的imports里引入CommonModule/NgForOf，哪怕所属模块导入了CommonModule也不生效，独立组件不继承模块层面的导入配置。
修改模块配置后只靠热更新验证，部分Angular版本的热更新不会重载模块配置，编译缓存会导致报错持续存在。

修复步骤

按顺序排查即可解决问题：

核对组件归属
找到写了*ngFor的组件对应的ts文件，确认这个组件只被声明在一个模块的declarations数组中，且这个模块已经正确导入了CommonModule。不要跨模块重复声明同一个组件，公共组件要抽成单独模块统一导出。
核对模块导入写法
打开对应子模块的@NgModule配置，确认CommonModule是写在imports数组内，正确写法参考：

@NgModule({
  declarations: [ListComponent], // 使用*ngFor的组件声明在这里
  imports: [CommonModule] // CommonModule必须放在imports数组里
})
export class ChildModule { }

核对模块导出链路
如果带*ngFor的组件需要在其他模块中使用，要在它所属的子模块的exports数组里加入该组件，上层调用模块不要直接导入组件，而是导入整个子模块。
检查模板语法
确认*ngFor写法符合规范，标准写法参考：

<div *ngFor="let item of dataList; trackBy: trackByFn">
  {{ item.value }}
</div>

重点检查项：有没有漏写*前缀、of有没有误写为in、ngFor大小写是否正确、let关键字有没有漏写。
5. 独立组件适配
如果报错的组件是standalone独立组件，直接在组件装饰器的imports数组里加入CommonModule即可，不需要依赖模块层面的导入，示例：

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-list',
  standalone: true,
  imports: [CommonModule], // 独立组件必须自行导入需要的内置指令
  template: `<div *ngFor="let num of numList">{{num}}</div>`
})
export class MyListComponent {
  numList = [1,2,3,4]
}

重启开发服务
以上配置修改完成后，手动终止当前的ng serve进程，重新启动项目清除编译缓存后再验证，不要依赖热更新加载模块配置变更。

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