Angular2, ng2-chart child rendering before parent 渲染

Question

我目前正在开发一个可视化应用程序，Angular2 和 TypeScript 用于 frontend，Spring-Boot 用于 backend。现在我正处于必须在我的 ng2-chart 组件中显示来自 backend 的数据的地步。

我正在我的父组件 ngOnInit() 函数中加载数据。数据被推送到两个数组，它们作为我的子组件的输入，如下所示：

ngOnInit() {
    this._sqlService.getCubeErrors().subscribe(
      data => {
        for (var i = 0; i < data.length; i++) {
          this.barLabels.push(data[i]["monthCube"]);
          this.barData[0]["data"].push(data[i]["errors"]);
        }
      },
      err => { this.error = true }
    )
  }

这是我的服务：

getCubeErrors() {
    return this.http.get('/rest/cubeerrors').map((res: Response) => res.json());
  }

barLabels和barData两个数组传递给子组件是这样的：

<bar-chart [barLabels]="barLabels" [barData]="barData" ></bar-chart>

在我的子组件中，我使用它们来创建图表：

    @Input() barData: any[];
    @Input() barLabels: Array<string>;

    public barChartData: any[] = this.barData;
    public barChartLabels: string[] = this.barLabels;

我试着用一些 console.log() 断点来跟踪数据，看起来它们是一样的。

我面临的问题是，子组件的图表在 ngOnInit() 发生之前以某种方式呈现，因此我的数据未显示。我正在寻找某种更新功能，但没有成功。

我希望有人对此有答案，

塞巴斯蒂安

Answer 1

您应该使用 ngOnChange 来更新图表组件的数据。

Answer 2

我现在明白了，我错过了子组件中的 changeDetection: ChangeDetectionStrategy.OnPush, 实现。

感谢大家的回答！

Answer 3

@Arpit 是正确的 - 对于任何依赖于通过它的 @Input 传递给它的数据的东西，你应该使用 ngOnChanges 而不是 ngOnInit。

所以你的子组件会非常相似，只是它会有一个 ngOnChanges 函数，在尝试使用它们之前检查 @Input 是否已被提取。

@Input() barData: any[];
@Input() barLabels: Array<string>;

public barChartData: any[];
public barChartLabels: string[];

ngOnChanges(){
    if(this.barData && this.barLabels){
        this.barChartData = this.barData;
        this.barChartLabels = this.barLabels;

        //Do anything else that relies on these arrays being defined.
    }
}

Here is the documentation.

Angular2, ng2-chart child rendering before parent 渲染

Angular2, ng2-chart child rendering before parent

typescript

ng2-charts

angular