Angular2，ng2-chart在父级之前渲染子级答案

【问题标题】：Angular2, ng2-chart child rendering before parentAngular2，ng2-chart在父级之前渲染子级
【发布时间】：2016-12-06 13:05:32
【问题描述】：

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

我正在我的父组件 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() 发生之前以某种方式呈现子组件的图表，因此我的数据没有显示。我正在寻找某种更新功能，但没有成功。

希望有人能解答一下，

塞巴斯蒂安

【问题讨论】：

ngOnChange 将在 conp 的 impl 更改时调用，但为此必须更改数组的函数引用。它不会检测到数组中的推送元素
我在图表组件中尝试了 ngOnChanges() 以进行测试，但它被触发了，所以我认为它确实检测到了变化。

标签： typescript angular ng2-charts

【解决方案1】：

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

【讨论】：

感谢您的回答，您能给我举个例子 ngOnChange 是如何工作的吗？

【解决方案2】：

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

感谢大家的回答！

【讨论】：

【解决方案3】：

@Arpit 是正确的 - 对于依赖于通过 @Inputs 传递给它的数据的任何内容，您应该使用 ngOnChanges 而不是 ngOnInit。

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

@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.

【讨论】：