Angular2，ng2在父对象之前绘制子对象渲染图

Question

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

我正在加载我的父组件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()发生之前就被渲染了，所以我的数据没有显示出来。我在搜索某种更新功能，但没有成功。

，我希望有人能对此给出答案

Sebastian

Answer 1

@Arpit是正确的-对于任何依赖于通过其@Input s传递给它的数据的东西，都应该使用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.
    }
}

这是文件。

Answer 2

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

Answer 3

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

谢谢你的回答！