Angular *ngFor渲染组件数组报NG6001/NG2003错误排查

• 核心概念错误：混淆了普通业务数据模型和Angular组件的职责。Angular组件的构造函数是给依赖注入系统用的，不能传入自定义业务参数，也绝对不能手动new组件实例塞进数组，组件的创建渲染是Angular框架自己负责的。
• 组件元数据配置错误：你写的两个组件@Component装饰器里的templateUrl、styleUrls路径重复了，ServerComponent错误引用了ServersComponent的模板和样式文件，导致Angular识别不到合法的组件元数据，触发NG6001报错。
• 依赖注入规则违反：ServerComponent构造函数里的id、name、status参数没有对应的注入令牌，Angular的DI系统不知道要注入什么值，触发NG2003报错。
• 基础语法错误：ServersComponent类末尾多写了一个闭合大括号，代码里的"是HTML转义字符，TS代码里要直接写双引号。

1. 先定义独立的业务数据模型 #

不要用组件类存业务数据，单独建一个类型定义约束服务器数据结构：

// server.interface.ts
export interface Server {
  id: number;
  name: string;
  status: string;
}

2. 修正单个服务器展示组件（ServerComponent） #

组件只负责接收传入的单个服务器数据并渲染，不要在构造函数里传业务参数，用@Input()装饰器接收父组件传值：

// server.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Server } from './server.interface';

@Component({
  selector: 'app-server',
  // 注意这里必须写当前组件自己的模板、样式路径，不能和其他组件重复
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  @Input() server: Server;

  constructor() {
    // 构造函数只放需要注入的服务类，不要写业务参数
  }

  ngOnInit(): void {}

  // 示例：根据服务器状态返回对应显示样式
  getStatusColor() {
    return this.server.status === 'online' ? 'green' : 'red';
  }
}

对应ServerComponent的模板（server.component.html）：

<div class="server-item">
  <p>服务器ID：{{ server.id }}</p>
  <p>服务器名称：{{ server.name }}</p>
  <p>运行状态：<span [style.color]="getStatusColor()">{{ server.status }}</span></p>
</div>

3. 修正服务器列表父组件（ServersComponent） #

数组里存普通的Server类型数据，不要存组件实例：

// servers.component.ts
import { Component, OnInit } from '@angular/core';
import { Server } from './server.interface';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  // 明确数组类型为Server，不要用模糊的Object类型
  servers: Server[] = [];

  constructor() {}

  ngOnInit(): void {}

  createServer() {
    const newServer: Server = {
      id: this.servers.length + 1,
      name: `测试服务器${this.servers.length + 1}`,
      status: Math.random() > 0.5 ? 'online' : 'offline'
    };
    this.servers.push(newServer);
  }
}

对应父组件模板（servers.component.html），用*ngFor遍历数据，把每个服务器对象传给子组件：

<div class="server-list">
  <button (click)="createServer()">新增服务器</button>
  <!-- 遍历数据数组，将每个数据项通过输入属性传给子组件渲染 -->
  <app-server 
    *ngFor="let item of servers"
    [server]="item"
  ></app-server>
  <p *ngIf="servers.length === 0">暂无服务器数据，点击按钮新增</p>
</div>

关键规则：Angular中组件是视图渲染的载体，业务数据要和组件本身解耦，父子组件通过@Input()/@Output()传值是标准通信方式，绝对不要手动实例化组件类。

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