Wie benutze ich aktualisierte Daten in meinem Angular App-Diagramm, nachdem ich einen http-Aufruf gemacht und eine for-Schleife benutzt habe?

Question

Ich benutze angular2-highcharts, aber ich denke nicht, dass dieses Problem spezifisch ist.

Das Problem, das ich habe, ist, dass das Diagramm mit einem leeren Array gerendert wird, bevor es mit den neuen Daten aktualisiert wird. Ich möchte schließlich ein click -Ereignis verwenden, um testArray mit dem API-Aufruf zu aktualisieren, und ein Dialogfeld starten, das eine Diagrammkomponente enthält, die diese Daten anzeigt. Also muss ich alles irgendwie synchron ablaufen lassen oder ein Observable verwenden, um auf die Daten zu warten?

Vorlage:

<chart type="StockChart" [options]="options"></chart> 

Typoskript:

testArray = [] 
options: Object; 

httpCall():Observable<any>{ 
    return this._http.get(httpUrl, options) 
     .map((res:Response)=> res.json() 
)}; 

updateArray(){ 
    this.httpCall() 
    .subscribe(res =>{ 
     for (let data of res.data){ 
      this.testArray.push([ 
       Date.parse(data['date']), 
       parseInt(data['value']) 
      ]) 
     } 
    }) 
}; 
// This is for chart: 
makeGraph(){ 
    this.options = { 
      series: [{ 
         type: 'column', 
         data: this.testArray, 
        }] 
    } 
} 

Jede Hilfe

groß sein würde

Answer 1

Sie sollten router data resolvers suchen. Ich schrieb über sie in einer question in Bezug auf etwas auf eine ionische Weise.

Dies sollte Ihnen eine Roadmap geben, wie Sie sie selbst implementieren können.

(Ionic verwendet Angular unter den Abdeckungen, aber nicht Router, sondern eine Navigationssteuerung - die gerade wieder etwas anderes geändert hat).

Wenn Sie weitere Informationen benötigen, habe ich gelernt, über diese Dinge in Angular Universität in ihren:

• Rxjs and Reactive Patterns Angular Architecture Course.
  
  • Schalter Branchen Router Daten Pre-fetching und Loading-Anzeige und
    
  • Implementierung eines Routers Loading-Anzeige
  :
  

Insbesondere das Zeug zwischen den Kurs Themen abgedeckt wird

Das Quellmaterial ist auch auf Github. Sie müssen wissen, welche Zweige aus den Videos zur Kasse gehen und folgen Sie dem Code, den Sie benötigen.