親の前にAngular2、ng2-chartの子レンダリング

私は現在、frontendの場合はAngular2とTypeScript、backendの場合はSpring-Bootのビジュアライゼーションアプリケーションに取り組んでいます。今、私は、backendからのデータが、ng2-chartコンポーネントに表示されることになっています。親の前にAngular2、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 } 
    ) 
    }

と私のサービス：：barLabelsとbarDataは、子コンポーネントに渡され

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

二つの配列データは、そのように私の子コンポーネントの入力として働く二つの配列にプッシュされます

012：私はチャートを作成するためにそれらを使用しています、私の子コンポーネントで

<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

。それは配列内の要素をプッシュして検出されません –

テスト目的のために私のチャートコンポーネントでngOnChanges（）を試して、それが発生したので、私はそれが変更を検出したと思う。 – CodeDonkey

@Arpitは正しいです - @Inputを介して渡されるデータに依存するものは、ngOnInitの代わりにngOnChangesを使用する必要があります。

あなたの子コンポーネントは非常によく似ています。が使用しようとする前にフェッチされたことを確認するngOnChanges関数があります。

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

ngOnChangeがCONP変化の場合IMPLと呼ばれるが、アレイのその関数への参照のために変更されなければならないであろう

出典

2016-08-02 08:25:06 dafyddPrys

これはさらにうまくいく、ありがとう！ ;） – CodeDonkey