Angular向子组件传递数组时未触发变更检测问题

父组件中存在二维数组ratingCounts，将内部数组传递给子组件时，Angular变更检测未触发图表更新，导致子组件始终显示空数组。父组件在ngOnInit中通过服务获取数据后更新ratingCounts，子组件实现了OnChanges接口，但@Input装饰的ratingCountData未正常驱动图表配置chartOptions同步新数据，需要让变更检测识别数组更新并正确展示图表。

父组件.ts代码 #

export class AssessmentResultComponent implements OnInit {
    assessmentResult: Rating[] = [];
    ratingCounts: number[][] = this.getRatingCount();

    constructor(
        private readonly assessmentResultService: AssessmentResultService, 
        private readonly errorHandlingService: ErrorHandlingService, 
        private readonly route: ActivatedRoute
    ) {}

    ngOnInit(): void {
        this.assessmentResultService.getAssessmentResults(Number(this.route.snapshot.paramMap.get('id')))
            .subscribe({
                next: (response) => {
                    this.assessmentResult = response;
                    this.ratingCounts = this.getRatingCount();
                    console.log(this.ratingCounts)
                },
                error: (error) => this.errorHandlingService.handleError(error),
            });
    }
}

父组件HTML代码 #

<app-bar-graph-multiple-choice [ratingCountData]="ratingCounts[0]"></app-bar-graph-multiple-choice>

子组件.ts代码 #

export class BarGraphMultipleChoiceComponent implements OnChanges{

  /*this doesn't update*/
  @Input() ratingCountData: number[] = [];

  chartOptions = {
    data: [{
      type: "bar",
      dataPoints: [
        { label: this.label1,  y: this.ratingCountData[0]  },
        { label: this.label2, y: this.ratingCountData[1]  },
        { label: this.label3, y: this.ratingCountData[2]  },
        { label: this.label4,  y: this.ratingCountData[3]  },
        { label: this.label5,  y: this.ratingCountData[4]  }
      ]
    }]
  };

  ngOnChanges(changes: SimpleChanges): void {
    /*if (changes['ratingCountData'].previousValue !== changes['ratingCountData'].currentValue) {
      this.ratingCountData = changes['ratingCountData'].currentValue;
      this.chartOptions.data[0].dataPoints[0].y = this.ratingCountData[0];
      this.chartOptions.data[0].dataPoints[1].y = this.ratingCountData[1];
      this.chartOptions.data[0].dataPoints[2].y = this.ratingCountData[2];
      this.chartOptions.data[0].dataPoints[3].y = this.ratingCountData[3];
      this.chartOptions.data[0].dataPoints[4].y = this.ratingCountData[4];
    }*/
    console.log(this.ratingCountData);
  }
}

getRatingCount()方法代码 #

getRatingCount(): number[][] {
    let result: number[][] = new Array(5);
    for (let i = 0; i < 5; i++) {
      result[i] = new Array(5);
    }

    for (let i = 0; i < result.length; i++) {
      for (let j = 0; j < result[i].length; j++) {
        result[i][j] = 0;
      }
    }

    this.assessmentResult.forEach(function (currentResult) {
      result[0][currentResult.zeitaufwandRating - 1]++;
      result[1][currentResult.inhaltRating - 1]++;
      result[2][currentResult.stoffmengeRating - 1]++;
      result[3][currentResult.niveauRating - 1]++;
      result[4][currentResult.relevanzRating - 1]++;
    });

    return result;
  }

解决方案 #

1. 修复ngOnChanges逻辑，同步图表数据 #

子组件的chartOptions在类初始化时使用的是空数组数据，后续ratingCountData更新后，需要手动同步数据点，若使用第三方图表库，还需触发图表刷新：

ngOnChanges(changes: SimpleChanges): void {
    const ratingChange = changes['ratingCountData'];
    // 仅当数据有有效更新时处理
    if (ratingChange && ratingChange.currentValue) {
      // 遍历更新数据点的y值
      this.chartOptions.data[0].dataPoints.forEach((point, index) => {
        point.y = ratingChange.currentValue[index] ?? 0;
      });
      // 若使用CanvasJS等库，需调用render方法刷新图表
      // this.chart?.render();
    }
}

2. 通过更新chartOptions引用触发变更检测 #

部分图表库依赖配置对象的引用变化感知更新，可通过创建新对象触发检测：

ngOnChanges(changes: SimpleChanges): void {
    const ratingChange = changes['ratingCountData'];
    if (ratingChange && ratingChange.currentValue) {
      // 创建新的配置对象，触发变更检测
      this.chartOptions = {
        ...this.chartOptions,
        data: [{
          ...this.chartOptions.data[0],
          dataPoints: [
            { label: this.label1, y: ratingChange.currentValue[0] ?? 0 },
            { label: this.label2, y: ratingChange.currentValue[1] ?? 0 },
            { label: this.label3, y: ratingChange.currentValue[2] ?? 0 },
            { label: this.label4, y: ratingChange.currentValue[3] ?? 0 },
            { label: this.label5, y: ratingChange.currentValue[4] ?? 0 }
          ]
        }]
      };
    }
}

3. 调整chartOptions初始化时机 #

避免在类初始化时使用未赋值的ratingCountData，将初始化逻辑放到ngOnInit或ngOnChanges中：

export class BarGraphMultipleChoiceComponent implements OnInit, OnChanges{

  @Input() ratingCountData: number[] = [];
  chartOptions: any;

  ngOnInit(): void {
    this.initChartOptions();
  }

  ngOnChanges(changes: SimpleChanges): void {
    const ratingChange = changes['ratingCountData'];
    if (ratingChange) {
      this.initChartOptions();
    }
  }

  private initChartOptions(): void {
    this.chartOptions = {
      data: [{
        type: "bar",
        dataPoints: [
          { label: this.label1, y: this.ratingCountData[0] ?? 0 },
          { label: this.label2, y: this.ratingCountData[1] ?? 0 },
          { label: this.label3, y: this.ratingCountData[2] ?? 0 },
          { label: this.label4, y: this.ratingCountData[3] ?? 0 },
          { label: this.label5, y: this.ratingCountData[4] ?? 0 }
        ]
      }]
    };
    // 按需刷新图表
    // this.chart?.render();
  }
}

关键说明 #

父组件中ratingCounts通过重新赋值新数组（this.ratingCounts = this.getRatingCount()），Angular会检测到引用变化，子组件的@Input能正常接收新值；核心问题是子组件的chartOptions未同步更新，需手动处理数据同步或引用更新。

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