Angular2, NG2-Diagramm Kind Rendering vor Eltern

Question

Ich arbeite derzeit an einer Visualisierungsanwendung mit Angular2 und TypeScript für das frontend und Spring-Boot für die backend. Jetzt bin ich an dem Punkt, wo die Daten aus dem backend in meinen ng2-Chart-Komponenten angezeigt werden müssen.

Ich lade die Daten in meine Elternkomponenten ngOnInit() -Funktion. Die Daten werden in zwei Reihen geschoben, die wie so für mein Kind Komponente als Eingang arbeiten:

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

und hier meinen Dienst:

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

Die beiden Arrays barLabels und barData auf das untergeordnete Komponente übergeben werden wie folgt aus:

<bar-chart [barLabels]="barLabels" [barData]="barData" ></bar-chart> 

In meinem Kind Komponente ihnen i ein Diagramm erstellen bin mit:

@Input() barData: any[]; 
    @Input() barLabels: Array<string>; 

    public barChartData: any[] = this.barData; 
    public barChartLabels: string[] = this.barLabels; 

Ich habe versucht, die Daten mit einigen console.log() Haltepunkten zu verfolgen, und es scheint, dass sie identisch sind.

Das Problem, mit dem ich konfrontiert bin, ist, dass irgendwie das Diagramm der Kindkomponente gerendert wird, bevor die ngOnInit() stattfindet und so meine Daten nicht angezeigt werden. Ich suchte nach einer Update-Funktion, war aber nicht erfolgreich.

Ich hoffe, jemand könnte eine Antwort auf diese haben,

Sebastian

Answer 1

@Arpit ist korrekt - Sie sollten ngOnChanges anstelle von ngOnInit für alles verwenden, das darauf angewiesen ist, dass die Daten über @Input s an es übergeben werden.

Also Ihre Kind-Komponente wäre sehr ähnlich, nur würde es eine ngOnChanges Funktion haben, die überprüft, dass die @Input s abgerufen worden sind, bevor Sie versuchen, sie zu verwenden.

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

Answer 2

Sie sollten ngOnChange verwenden, um die Daten für die Diagrammkomponente zu aktualisieren.

Answer 3

Ich habe es jetzt herausgefunden, ich verpasste die changeDetection: ChangeDetectionStrategy.OnPush, Implementierung in meiner Kindkomponente.

Danke für alle Antworten!