ng2-charts调用更新方法数据正常但标签不生效问题求助

问题原因 #

1. 组件配置了ChangeDetectionStrategy.OnPush变更检测策略，该策略下只有输入属性变更、组件内部事件触发、手动调用变更检测接口时，Angular才会更新模板绑定。你在updateData方法中修改labels属性的操作属于普通方法调用，不会自动触发变更检测，因此模板上绑定给baseChart指令的labels值没有同步更新，ng2-charts拿到的始终是初始的空数组。
2. 直接调用this.chart.update()时，BaseChartDirective内部的labels属性还没有和组件的labels属性同步，更新图表时用的还是旧标签值，因此出现undefined的问题。

解决方案 #

你可以选择以下任意一种方案修复：

方案1：手动触发变更检测（推荐，符合Angular开发规范） #

第一步：在组件中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数中注入
constructor(private cdr: ChangeDetectorRef) { }

第二步：修改updateData方法，更新数据后触发变更检测：

public updateData(labels: string[], data: number[]) {
  // 使用扩展运算符生成新的数组引用，适配OnPush策略的变更检测
  this.labels = [...labels];
  this.datasets[0].data = [...data];
  // 手动触发变更检测，同步模板绑定的值到baseChart指令
  this.cdr.detectChanges();
  this.chart.update();
}

方案2：直接给BaseChartDirective的labels属性赋值 #

无需修改其他依赖，直接修改updateData方法即可：

public updateData(labels: string[], data: number[]) {
  this.labels = labels;
  this.datasets[0].data = data;
  // 直接同步labels到图表指令，跳过变更检测等待
  this.chart.labels = labels;
  this.chart.update();
}

另外你模板中使用的[(labels)]双向绑定如果没有用到子组件向父组件回传labels的逻辑，可以简化为单向绑定[labels]，不会影响功能。

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