Angular: ngFor循环中向嵌套子组件传递动态值不生效问题

按从易到难的顺序排查即可定位问题：

• 修复模板标签闭合错误
  你提供的模板代码中<h1>{{item.name}}<h1> 存在h1标签未正确闭合的问题，这类HTML结构解析异常会导致Angular模板编译时错位，识别不到后续的组件绑定逻辑，正确写法为：

  <!-- 错误写法：未闭合h1标签 -->
  <div *ngFor="let item of clientOtherDetails">
    <h1>{{item.name}}<h1>
    <app-child-component [firstname]="item.firstname" [secondname]="item.secondname"></app-child-component>
  </div>
  
  <!-- 修正后写法 -->
  <div *ngFor="let item of clientOtherDetails">
    <h1>{{item.name}}</h1>
    <app-child-component [firstname]="item.firstname" [secondname]="item.secondname"></app-child-component>
  </div>
  

• 校验绑定值的匹配一致性
  首先在父组件的循环节点内临时增加调试输出，验证当前循环项的字段是否能正常取值：

  <div *ngFor="let item of clientOtherDetails">
    <h1>{{item.name}}</h1>
    <!-- 临时调试代码 -->
    <span>调试取值：{{item.firstname}} / {{item.secondname}}</span>
    <app-child-component [firstname]="item.firstname" [secondname]="item.secondname"></app-child-component>
  </div>
  

  如果调试输出的内容为空或undefined，说明问题出在父组件的数据源上：核对clientOtherDetails数组的实际字段名，确保字段名和模板中绑定的item.firstname、item.secondname大小写、命名完全一致，避免出现实际字段为firstName（大写F）但模板取firstname的不匹配问题。
• 确认输入属性的命名大小写匹配
  Angular的自定义属性绑定是严格区分大小写的，你在子组件中通过@Input()声明的firstname、secondname属性名，必须和模板中绑定的属性名完全一致。如果绑定的时候大小写写错（比如写成[firstName]），Angular会把这个属性当成普通的DOM自定义属性处理，不会赋值到子组件的对应输入属性上，导致子组件接收不到值。
• 调整子组件读取输入值的时机
  子组件的构造函数执行时，Angular还没有完成父组件输入属性的赋值流程，如果直接在构造函数里读取firstname、secondname，拿到的永远是初始的undefined。需要把读取输入值、基于值做逻辑处理的代码，挪到ngOnInit生命周期钩子里：

  // 子组件代码
  @Input() firstname;
  @Input() secondname;
  
  // 错误写法：构造函数执行时输入属性还未赋值
  constructor() {
    console.log('构造函数中取值：', this.firstname); // 输出undefined
  }
  
  // 正确写法：ngOnInit触发时，输入属性已经完成赋值
  ngOnInit() {
    console.log('ngOnInit中取值：', this.firstname, this.secondname); // 可正常拿到初始化阶段传入的值
  }
  

  如果你的数据源是异步获取的（比如接口请求完成后才给clientOtherDetails数组赋值），还需要通过ngOnChanges钩子监听输入值的后续更新，避免拿到空值后没有同步最新的传入值：

  ngOnChanges(changes: SimpleChanges) {
    // 只要firstname/secondname的值发生变化，就会触发对应逻辑
    if (changes.firstname?.currentValue) {
      console.log('firstname更新为：', changes.firstname.currentValue);
    }
    if (changes.secondname?.currentValue) {
      console.log('secondname更新为：', changes.secondname.currentValue);
    }
  }
  

• 确认子组件处于ngFor的作用域内部
  检查代码层级，确保<app-child-component>标签没有被错误移出带*ngFor的div节点，否则组件不在循环作用域内，无法读取循环变量item，绑定值自然会失效。

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