当我更改输入数据时，角度图表不会重新呈现

Question

父组件：appComponent

子组件：chartComponent

我有一个共享/通用图表组件，我有一个下拉菜单，基于下拉菜单选择，我正在进行服务调用并获取数据并将该数据传递给子（chartComponent）组件。

问题是当我第一次选择下拉菜单并单击应用按钮时它工作正常但第二次如果更改下拉菜单并单击应用，图表不会重新呈现

这是代码stackblitz

Answer 1

根据您提供的代码，问题是子组件没有收到有关下拉选择更改的通知。要修复它，您可以向子组件添加

ngOnChanges()

方法，以便在

label

更改时更新图表：

ngOnChanges(changes: SimpleChanges) {
    if (changes['labels'] && this.chart) {
        this.chart.data.datasets = this.dataSets;
        this.chart.data.labels = this.labels;
        this.chart.update();
    }
}

Answer 2

问题

您正在

ngAfterViewInit

中创建图表。根据 ngAfterViewInit 文档

在实例化视图时只调用一次。

解决方案

使用

ngOnChanges

生命周期钩子，因为它会在任何数据绑定属性时被调用。

但是，由于您需要在

dataSets

更改时重新创建图表，您可以通过检查它是否已更改来进一步限制它

ngOnChanges(changes: SimpleChanges) {
    if (changes.dataSets) {
      // recreate chart
    }
}

OnPush 变化检测

此外，数组引用不会更改，因此不会触发 OnPush 更改检测的更改检测。您可以按如下方式修复它：

    this.dataSets[0].data = this.data;
    this.dataSets = [...this.dataSets]

我已经在此处修复了您的代码 - 堆栈闪电战