Angular 11环境下ng2-charts仅刷新页面后才显示的问题如何解决？

问题根因 #

ng2-charts 组件默认对输入属性采用浅比较检测变更，你通过push方法修改数组属于 mutable 操作，不会变更数组引用，因此组件无法感知到数据更新；同时异步请求返回后的变更检测未及时触发，也会导致视图不更新。

解决方案 #

按照以下步骤修改代码即可解决首次加载空白问题：

1. 改用不可变方式更新图表数据
   不要直接在原有数组上调用push方法，而是先声明临时数组处理数据，处理完成后整体赋值，触发输入属性的变更检测。修改initUsagePercentages方法：

private initUsagePercentages(statistics: UsageStatistics): void {
  // 声明临时数组处理数据
  const labels: Label[] = [];
  const chartData: number[] = [];
  const colors: string[] = [];
  for(let i = 0; i < statistics.planguages.length; i++) {
    labels.push(statistics.planguages[i].language);
    chartData.push(statistics.numberSubmissions[i]);
    colors.push(`${statistics.planguages[i].color}`);
  }
  // 整体赋值变更数组引用
  this.doughnutChartLabels = labels;
  this.doughnutChartData = [chartData];
  this.doughutColors = colors;
}

2. 手动触发变更检测
   你已经注入了ChangeDetectorRef，在数据处理完成后手动触发视图更新，修改visualizeChart方法：

private visualizeChart(): void {
  this.pieChartColors = [{backgroundColor: this.doughutColors}];
  this.loaded = true;
  // 手动触发变更检测
  this.changeDetector.detectChanges();
}

3. 延迟初始化baseChart组件（可选，兜底方案）
   如果以上修改仍未生效，直接给canvas标签添加*ngIf绑定，确保图表组件在数据准备完成后才初始化：

<canvas *ngIf="loaded"
        baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        [colors]="pieChartColors">
</canvas>

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