Angular14中ngFor循环场景下父子组件Input传值失效问题

传值失效和*ngFor循环语法无关，是两处逻辑错误导致的：

• 父组件加载状态标记位置错误
  你在getMeals方法中把this.loaded = true写在了subscribe回调外部，这是异步请求的典型时序错误。mealService.getMeals()返回的是异步Observable，subscribe内的逻辑会在接口响应返回后才执行，写在外部的loaded标记会在发起请求的瞬间就被置为true，此时mealList还是空数组，后续虽然接口返回数据后meal.name能靠变更检测正常渲染，但子组件的初始化时序已经被打乱。
  修正后的父组件方法代码：

  getMeals() {
    this.mealService.getMeals().subscribe((meals) => {
      this.mealList = meals;
      // 等数据真正赋值完成后，再标记加载完成
      this.loaded = true;
    });
  }  
  

• 子组件图表数据初始化时机错误
  你在类属性定义阶段就直接给doughnutChartData赋值，此时@Input()对应的输入属性还未完成绑定，读取到的所有营养字段都是undefined。后续父组件传入的值更新时，你也没有同步更新图表的数据集，所以图表始终拿不到正确数据。
  修正后的子组件代码：

  import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
  import { ChartData, ChartType } from 'chart.js';
  
  export class ChartComponent implements OnChanges {
    @Input() numCalories!: number;
    @Input() numFat!: number;
    @Input() numCarbs!: number;
    @Input() numProtein!: number;
  
    public doughnutChartLabels: string[] = [
      'Calories',
      'Proteins',
      'Carbs',
      'Fat',
    ];
    public doughnutChartData: ChartData<'doughnut'> = {
      labels: this.doughnutChartLabels,
      datasets: [{ data: [] }]
    };
    public doughnutChartType: ChartType = 'doughnut';
  
    ngOnChanges(changes: SimpleChanges): void {
      // 所有输入属性完成赋值后，同步更新图表数据
      if (
        changes['numCalories']?.currentValue &&
        changes['numFat']?.currentValue &&
        changes['numCarbs']?.currentValue &&
        changes['numProtein']?.currentValue
      ) {
        this.doughnutChartData.datasets[0].data = [
          this.numCalories,
          this.numProtein,
          this.numCarbs,
          this.numFat
        ];
      }
    }
  }
  

*ngFor循环内的Input传值逻辑和普通场景完全一致，不存在特殊语法限制，只要绑定的数据源已经完成赋值、子组件正确监听输入属性变化更新自身状态，就能正常完成数据传递。

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