Angular2，ng2-圖表子代在父代之前呈現

我目前致力於Angular2和TypeScript爲frontend和Spring-Boot爲backend的可視化應用程序。現在我處於來自backend的數據要顯示在我的ng2圖表組件中。Angular2，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()之前呈現子組件的圖表，因此我的數據不會顯示。我正在尋找某種更新功能，但沒有成功。

我希望有人可能有這樣一個答案，

塞巴斯蒂安

來源

2016-08-01 CodeDonkey

ngOnChange將被稱爲時的CONP變化IMPL但對於陣列的那起作用參考必須被改變。它不會檢測數組中的推送元素 –

我在圖表組件中嘗試ngOnChanges（）以用於測試目的，並且它被觸發，所以我認爲它檢測到了更改。 – CodeDonkey

@Arpit是正確的 - 您應該使用ngOnChanges而不是ngOnInit，因爲任何依賴通過它傳遞給它的數據的東西都是@Input s。

所以你的孩子的組成部分將非常相似，只是它會有一個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.

來源

2016-08-02 08:25:06 dafyddPrys

這個效果更好，非常感謝！ ;） – CodeDonkey