ng2-chart:在循环中添加标签可以防止图形加载

Question

我想用ng2图表来显示我的数据。使用模型数据一切都很好，但是当我尝试迭代父组件传递的Array时，图形本身不显示，只有正交标记，控制台上什么也没有出现。我已经把问题缩小到标签数组:如果你删除LineChartComponent中的注释行，它就会工作。

下面是我的代码:

import { Component, Input } from '@angular/core';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
import { Traffic } from './traffic';
@Component({
  selector: 'line-chart-component',
  directives: [CHART_DIRECTIVES],
  styles: [`
    .chart {
      display: block;
    }
  `],
  template: `
  <div style="display: block">
        <canvas baseChart
              [datasets]="datasets"
              [labels]="labels"
              [chartType]="'line'"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
        </div>
  `
})
export class LineChartComponent {
  _dataArray: Traffic[] = [];    
  private datasets = [
      {
        label: "Desktop",
        data: []
      }
    ];    
  private labels: string [] = [];
  @Input()
  set dataArray(dataArray: Traffic[]) {
    dataArray.forEach((data: any,index: number) => {
      this.datasets[0].data.push(Math.round(data.Value));
      this.labels.push(data.Date));
    });
    // this.labels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
  }
  get dataArray() { return this._dataArray; }
  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };
}

N。B:没有一个数组是未定义的。两者都有良好的结构，包含所有的数据，并有适当的类型。另外，Data.date返回一个String。

是什么导致了这样的行为?

谢谢!

Answer 1

所以答案是:这两个数组之间似乎存在某种竞争条件。我的猜测是，标签的推送比数字的推送需要更长的时间，因此图表不能正确加载。在setter结束时调用this.datasets = this.datasets.slice();来更新图形，