Angular 14使用*ngFor报错：无匹配ngFor属性的指令

*ngFor是Angular内置的结构指令，由@angular/common包下的CommonModule导出，出现No directive is matched on attribute ngFor错误，核心原因是当前使用该指令的组件上下文，没有正确引入指令依赖，Angular14版本下具体分两种场景：

• 传统模块化开发模式：组件所属的NgModule没有在imports数组中导入CommonModule
• 独立组件（Standalone Component，Angular14正式支持的新特性）开发模式：组件的@Component装饰器的imports数组中，没有引入NgFor指令或者CommonModule

你贴出的模板代码本身语法没有问题，不需要调整模板逻辑，只需要补全对应模块导入即可。

根据你项目使用的开发模式选择对应修复方式即可：

1. 传统NgModule模式 #

找到当前组件声明所在的模块文件（通常命名为xxx.module.ts），在@NgModule的imports数组中加入CommonModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 其他组件、服务的引入省略

@NgModule({
  declarations: [
    // 你当前写表格的组件需要声明在这个数组里
  ],
  imports: [
    CommonModule // 加入这一行
    // 其他业务模块、路由模块等原有导入保留
  ]
})
export class XxxModule { }

2. Standalone独立组件模式 #

找到写表格模板的组件的ts文件，在@Component装饰器的imports数组中加入NgFor指令（相比引入全量CommonModule体积更优）：

import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
// 其他依赖引入省略

@Component({
  selector: 'app-employee-table',
  standalone: true,
  imports: [NgFor], // 加入这一行
  // 你的组件模板配置，原有模板代码不需要修改
  template: `
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.firstName }}</td>
      <td>{{ employee.lastName }}</td>
      <td>{{ employee.emailId }}</td>
    </tr>
  </tbody>
  `
})
export class EmployeeTableComponent {
  employees = []; // 你的原有员工数据定义保留
}

补充排查点：如果补全导入后依然报错，检查模板中*ngFor的星号有没有漏写、遍历关键字是不是of（不要写成in）即可，你当前贴出的模板代码这部分是正确的。

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