Raison:
La raison en undefined
est que vous effectuez une opération asynchrone. Cela signifie qu'il faudra un certain temps pour terminer la getEventList
méthode (en fonction principalement de la vitesse de votre réseau).
Regardons donc l'appel http.
this.es.getEventList()
Après avoir réellement fait ("feu") votre requête http avec subscribe
vous attendra la réponse. En attendant, javascript exécutera les lignes sous ce code et s'il rencontre des affectations / opérations synchrones, il les exécutera immédiatement.
Donc, après s'être abonné au getEventList()
et attendre la réponse,
console.log(this.myEvents);
ligne sera exécutée immédiatement. Et la valeur de celui-ci est undefined
avant que la réponse n'arrive du serveur (ou à tout ce que vous avez initialisé en premier lieu).
C'est similaire à faire:
ngOnInit(){
setTimeout(()=>{
this.myEvents = response;
}, 5000);
console.log(this.myEvents); //This prints undefined!
}
Solution:
Alors, comment pouvons-nous surmonter ce problème? Nous utiliserons la fonction de rappel qui est la subscribe
méthode. Parce que lorsque les données arrivent du serveur, elles seront à l'intérieur du subscribe
avec la réponse.
Changez donc le code en:
this.es.getEventList()
.subscribe((response)=>{
this.myEvents = response;
console.log(this.myEvents); //<-- not undefined anymore
});
imprimera la réponse .. après un certain temps.
Ce que tu devrais faire:
Il peut y avoir beaucoup de choses à faire avec votre réponse autres que la simple consignation; vous devez faire toutes ces opérations à l'intérieur du rappel (à l'intérieur de la subscribe
fonction), lorsque les données arrivent.
Une autre chose à mentionner est que si vous venez d'un Promise
arrière - plan, le then
rappel correspond à subscribe
des observables.
Ce que vous ne devriez pas faire:
Vous ne devriez pas essayer de changer une opération asynchrone en une opération de synchronisation (ce n'est pas possible). L'une des raisons pour lesquelles nous avons des opérations asynchrones est de ne pas obliger l'utilisateur à attendre la fin d'une opération alors qu'il peut faire d'autres choses pendant cette période. Supposons que l'une de vos opérations asynchrones prenne 3 minutes, si nous n'avions pas les opérations asynchrones, l'interface se figerait pendant 3 minutes.
Lecture suggérée:
Le mérite original de cette réponse va à: Comment puis-je renvoyer la réponse d'un appel asynchrone?
Mais avec la version angular2, nous avons été introduits à la dactylographie et aux observables, donc cette réponse couvre, espérons-le, les bases de la gestion d'une requête asynchrone avec des observables.