Angular2, NG2-чарт ребенок рендеринг до того родителя

В настоящее время я работаю над приложением визуализации с Angular2 и TypeScript для frontend и Спринг-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(), и поэтому мои данные не отображаются. Я искал функцию обновления, но не был успешным.

Я надеюсь, что кто-то, возможно, ответ на это,

Sebastian

источник

2016-08-01 CodeDonkey

ngOnChange будет вызвана, когда осущ из CONP изменяется, но для этого, чтобы функционировать ссылки массива должен быть изменен. Он не будет обнаруживать толкающий элемент в массиве –

Я попытался ngOnChanges() в компоненте диаграммы для целей тестирования, и он уволился, поэтому я думаю, что он обнаружил изменения. – CodeDonkey

@Arpit правильный - вы должны использовать ngOnChanges вместо ngOnInit для всего, что зависит от передаваемых ему данных через @Input.

Итак, ваш дочерний компонент был бы очень похож, просто у него была бы функция ngOnChanges, которая проверяет, что @Input s были извлечены, прежде чем пытаться их использовать.

@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