0

私は現在、 と および のAngular2Spring -Boot を使用した視覚化アプリケーションに取り組んでいます。これで、ハッシュからのデータをng2-chart コンポーネントに表示する必要があります。TypeScriptfrontendbackendbackend

親コンポーネントの ngOnInit() 関数にデータをロードしています。データは、次のように子コンポーネントの入力として機能する 2 つの配列にプッシュされます。

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());
  }

2 つの配列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()ため、データが表示されないことです。ある種の更新機能を探していましたが、成功しませんでした。

誰かがこれに対する答えを持っていることを願っています、

セバスチャン

4

3 に答える 3

0

changeDetection: ChangeDetectionStrategy.OnPush,私は今それを理解しました、私は私の子コンポーネントの実装を逃しました。

すべての答えをありがとう！

于 2016-08-02T07:30:08.777 に答える
0

ngOnChangeチャート コンポーネントのデータを更新するために 使用する必要があります。

于 2016-08-01T14:39:34.647 に答える
0

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

これがドキュメントです。

于 2016-08-02T08:25:06.597 に答える