Angular报NG0303无法绑定ngForOfOf属性错误如何解决

这个报错的核心是Angular编译模板时，识别到div上要绑定一个不存在的ngForOfOf属性，按以下优先级排查即可：

第一优先级：检查模板语法（90%的该报错都是这个原因） #

正常*ngFor指令对应的输入属性是ngForOf，报错里多出来的一个Of，基本都是写代码时手滑导致的语法错误，常见错误写法：

• 重复写了of关键字：比如写成<div *ngFor="let item of of products">，多打了一次of
• 指令名写错：比如手滑写成*ngForOf="let item of products"，多加了Of后缀
• of和后面的遍历对象之间漏了空格：比如写成<div *ngFor="let item ofproducts">，Angular无法正确拆分语法关键字，最终解析出错误的属性名
  直接全局搜索项目里所有ngFor的用法，对照标准写法修正即可：

<!-- 标准正确写法 -->
<div *ngFor="let product of productList">
  <!-- 循环内容 -->
</div>

第二优先级：检查模块导入配置 #

确认语法完全正确后，再看模块配置问题：

• 你贴出的根模块app.module.ts已经导入了BrowserModule，根模块下不需要额外导入其他模块就可以正常使用ngFor、ngIf这类内置指令——BrowserModule已经导出了CommonModule（所有内置模板指令都在CommonModule中）
• 如果你写ngFor的组件是在某个特性模块（不是根AppModule）中声明的，那这个特性模块必须在自身的imports数组中导入CommonModule，否则内置指令无法被识别，修正示例：

// 特性模块示例，比如product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 手动引入
import { ProductComponent } from './product.component';

@NgModule({
  declarations: [ProductComponent],
  imports: [
    CommonModule // 加入imports数组
  ]
})
export class ProductModule { }

• 如果你用的是Angular 14及以上版本的独立组件（配置了standalone: true），需要直接在组件的imports数组中引入NgFor指令或者CommonModule：

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

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [NgFor], // 独立组件直接引入指令
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ProductComponent {
  list = []
}

快速排错技巧 #

如果检查完语法还是报错，直接把写了ngFor的那行代码删掉，手动重写一遍标准写法，排除IDE自动补全、不可见字符导致的语法解析问题；修改后重新执行ng serve编译，控制台没有ngFor相关绑定报错即为修复完成。

内容的提问来源于stack exchange，提问作者Güneş İliksiz