Comment utiliser des données mises à jour dans mon graphique Angular App après avoir effectué un appel http et utilisé une boucle for ?

Question

J'utilise angular2-highcharts mais je ne pense pas que ce problème lui soit spécifique.

Le problème que je rencontre est que le graphique est rendu avec un tableau vide avant qu'il ne soit mis à jour avec les nouvelles données. Je veux finalement utiliser un événement de clic pour que testArray soit mis à jour avec l'appel API et lancer une boîte de dialogue contenant un composant graphique affichant ces données. Il faut donc que tout se passe de manière synchrone ou que j'utilise un observable pour attendre les données ?

Modèle :

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

Dactylographié :

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,
                    }]
  } 
}

Toute aide serait la bienvenue

Answer 1

Vous devriez vous pencher sur les résolveurs de données des routeurs . J'ai écrit sur eux dans un question pour faire quelque chose comme ça d'une manière Ionic.

Cela devrait vous donner une feuille de route pour les mettre en œuvre vous-même.

(Ionic utilise Angular sous la couverture mais n'utilise pas de routeur, plutôt un contrôleur de navigation - qui vient d'être changé à nouveau pour autre chose).

Si vous voulez plus de détails, j'ai appris tout cela à l'Université Angular :

• Cours d'architecture angulaire Rxjs et Reactive Patterns .

Plus précisément, ce sujet est couvert entre les sujets de cours suivants :

• Indicateur de préchargement et de chargement des données du routeur des branches de commutateur, et

• Mise en œuvre d'un indicateur de chargement de routeur

Le matériel source est également sur Github. Vous devez savoir quelles branches vérifier à partir des vidéos et suivre le processus pour obtenir le code dont vous avez besoin.