Angular中Chart.js无法读取Observable传递的输入数据求助

我在用Angular结合Chart.js创建图表时遇到问题：父组件传递的数据无法被Chart.js识别。

数据格式示例 #

[
  {month: 'January', revenue: 100}, 
  {month: 'February', revenue: 140}
  // ...更多数据
]

数据传递流程 #

先获取数据传入父容器组件，在模板中用async管道订阅后，通过@Input传递给子组件。

子组件代码 #

export class MonthlySalesComponent implements OnInit {
  @Input() soldUnitsPerMonth!: any;

  @ViewChild('chart')
  private chartRef!: ElementRef;
  private chart!: Chart;

  public barChartLegend = true;
  public barChartPlugins = [];

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'bar',
      data: {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        datasets: [
          {
            label: 'Interesting Data',
            data: [1, 2, 3, 1, 5, 7, 1, 2, 3, 5],
          },
        ],
      },
    });
  }

  getAllMonths() {
    return this.soldUnitsPerMonth.map((item: any) => item.month);
  }
}

问题细节 #

我想用getAllMonths()提取所有月份，替换图表中硬编码的labels和datasets数据，但初始化Chart时，@Input的soldUnitsPerMonth仍为undefined。虽然用ul/li结合*ngFor能在UI上正常渲染数据，但Chart构造函数无法访问该数据，尝试ngAfterViewInit钩子也未解决。

子组件模板代码 #

<canvas #chart width="600" height="200"></canvas>

问题原因 #

async管道异步获取数据，ngAfterViewInit钩子执行时，父组件的异步数据尚未传递到子组件，导致soldUnitsPerMonth为undefined。

解决方法 #

方法1：用ngOnChanges监听Input变化 #

当Input数据更新时，初始化或更新图表：

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

export class MonthlySalesComponent implements OnInit, OnChanges {
  @Input() soldUnitsPerMonth!: {month: string, revenue: number}[]; // 建议指定明确类型

  @ViewChild('chart')
  private chartRef!: ElementRef;
  private chart!: Chart;

  public barChartLegend = true;
  public barChartPlugins = [];

  constructor() {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    // 检查数据是否存在且已更新
    if (changes['soldUnitsPerMonth'] && this.soldUnitsPerMonth?.length) {
      if (this.chart) {
        // 已有图表则更新数据
        this.chart.data.labels = this.getAllMonths();
        this.chart.data.datasets[0].data = this.soldUnitsPerMonth.map(item => item.revenue);
        this.chart.update();
      } else {
        // 初始化新图表
        this.initChart();
      }
    }
  }

  ngAfterViewInit(): void {}

  getAllMonths() {
    return this.soldUnitsPerMonth.map(item => item.month);
  }

  private initChart(): void {
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'bar',
      data: {
        labels: this.getAllMonths(),
        datasets: [
          {
            label: '月度营收',
            data: this.soldUnitsPerMonth.map(item => item.revenue),
          },
        ],
      },
    });
  }
}

方法2：模板条件渲染子组件 #

确保数据加载完成后再渲染子组件，让ngAfterViewInit执行时数据已就绪：
父组件模板：

<app-monthly-sales 
  *ngIf="soldUnitsPerMonth$ | async as data" 
  [soldUnitsPerMonth]="data"
></app-monthly-sales>

子组件中直接初始化图表：

ngAfterViewInit(): void {
  if (this.soldUnitsPerMonth?.length) {
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'bar',
      data: {
        labels: this.getAllMonths(),
        datasets: [
          {
            label: '月度营收',
            data: this.soldUnitsPerMonth.map(item => item.revenue),
          },
        ],
      },
    });
  }
}

额外建议 #

• 避免使用any类型，给@Input指定明确的类型定义，减少潜在问题。
• 可添加数据为空时的占位提示，提升用户体验。

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