Angular新手求助：使用*ngFor指令报错，该如何解决？

针对你遇到的*ngFor报错，有两种直接的解决方式：

方式1：导入依赖模块/指令 #

如果想继续使用*ngFor，需要在组件的@Component装饰器的imports数组中添加CommonModule（包含所有常用结构型指令）或单独导入NgFor指令。

组件代码示例：

import { Component } from '@angular/core';
// 导入CommonModule（推荐，包含*ngFor、*ngIf等常用指令）
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  standalone: true,
  imports: [CommonModule] // 这里添加CommonModule
})
export class ContactListComponent {
  // 替换为你的contacts数据
  contacts = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
}

如果只想导入单个NgFor指令，把imports改成[NgFor]即可，记得先导入NgFor：

import { NgFor } from '@angular/common';
// ...
imports: [NgFor]

方式2：使用Angular新内置控制流@for #

如果你使用的是Angular 17及以上版本，推荐使用新的内置控制流语法@for，无需额外导入任何模块，语法更直观：

修改模板代码为：

<h2>List</h2>

<ul>
  @for (c of contacts; track c.id) {
    <li>{{c.id}} - {{c.name}}</li>
  }
</ul>

注意：track c.id是必须项，用来指定列表项的唯一标识以优化渲染性能，通常使用数据的唯一ID字段。

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