使用*ngFor向组件传递对象时首个实例未获取到对象

这种第一个组件拿不到数据的坑我之前踩过好几次，大概率是这几个原因导致的，咱们一步步来排查解决：

1. 检查组件内部的生命周期钩子使用是否正确 #

很多时候问题出在<employee>组件里的初始化逻辑时机不对。如果你在constructor里直接访问@Input() employee属性，那大概率会拿到undefined——因为Angular是先创建组件实例（执行constructor），再绑定输入属性的。

正确做法是把处理输入数据的逻辑移到ngOnInit或者ngOnChanges钩子中：

import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'employee',
  templateUrl: './employee.component.html'
})
export class EmployeeComponent implements OnInit, OnChanges {
  @Input() employee: any;

  constructor() {
    // 这里不要访问this.employee，此时还未赋值
  }

  ngOnInit(): void {
    // 这里可以安全访问this.employee
    console.log('初始化时拿到的员工数据：', this.employee);
  }

  // 如果需要监听employee属性的变化，用ngOnChanges
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['employee']) {
      console.log('员工数据更新了：', changes['employee'].currentValue);
    }
  }
}

2. 修复不合法的HTML结构 #

你现在的模板里直接在<tr>标签下放置自定义组件<employee>，这不符合HTML规范——<tr>的直接子元素必须是<td>或<th>。浏览器会自动修正这种不合法的结构，可能导致第一个组件的DOM位置异常，进而影响数据绑定。

修正后的模板：

<tr *ngFor="let data of employees">
  <td><employee [employee]="data"></employee></td>
</tr>

3. 添加trackBy函数优化渲染 #

如果employees数组会频繁更新，Angular默认的*ngFor会销毁重建所有组件实例，偶尔会出现第一个实例初始化异常的情况。添加trackBy函数可以让Angular精准识别数组项，避免不必要的组件重建。

步骤如下：

• 在父组件中定义trackBy函数：

// 父组件.ts文件
trackByEmployeeId(index: number, employee: any): number {
  // 假设每个employee有唯一的id属性，用它来标识数组项
  return employee.id;
}

• 在模板中使用trackBy：

<tr *ngFor="let data of employees; trackBy: trackByEmployeeId">
  <td><employee [employee]="data"></employee></td>
</tr>

按照这三个步骤排查，基本就能解决第一个组件拿不到数据的问题了。

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