Mon objectif est de charger une liste déroulante lorsqu'un composant rend.
J'ai un service qui frappe une URL et obtient des données JSON. Quelque chose comme ça J'ai un composant (étudiantlistchotonent) qui afficherait des noms d'étudiants que je reçois du service, dans une liste déroulante. P> buttonClicked() {
console.log(this.items); /// see the students in console)
}
4 Réponses :
Le Vous pouvez enregistrer les valeurs avec Je pense que vous devez vous familiariser plus familier avec Voici les documents officiels de getStudentList du service renvoie un Observable C'est donc une fonction async . Donc, data => {this.items = data} La ligne effectue uniquement une fois l'abonnement terminé. Mais ceci.items n'est pas non défini puisque vous l'attribuez un tableau vide avec éléments: [] , il est seulement ButtonClicked méthode car votre demande HTTP est terminée.
observable à partir de rxjs .
httpclient : https://angular.io/ guide / http
Alors où devrais-je mettre le code qui remplit la liste déroulante?
le non défini vient du ceci.items = this.studentlistservice.getStudent (). S'abonner ( PARTIE - Le résultat de l'abonnement () est attribué à cela très peu de temps jusqu'à ce qu'il soit est écrasé par le responsable du rappel du succès.
Au fur et à mesure que l'AMIT mentionné, comme il s'agit d'un appel ASYNC, vos données ne seront pas disponibles jusqu'à ce que Lisez les commentaires dans le code ci-dessous pour comprendre: P> S'abonner code> Les courses du bloc. Donc, vous n'aurez pas accès à des données Outtisde IT export class StudentListComponent implements OnInit {
items: any = [];
constructor(private studentListService: StudentListService) {}
ngOnInit() {
this.studentListService.getStudent().subscribe(
data => {
this.items = data;
////////// Here this.items WILL BE DEFINED
},
err => console.error(err),
() => console.log('Done Loading Student Data'));
////////// Here this.items WILL BE undefined as this will run synchronously i.e. it won't wait for this.studentListService.getStudent() to run.
}
}
ceci.items = this.studentlistservice.getStudent (). S'abonner () est faux, c'est attribuer abonnement à items
@ HARUNYıLMAZ, merci beaucoup d'avoir souligné cela. Mise à jour de la réponse :)
Supprimer cette affectation note : vous ne pouvez accéder que une fois que l'appel ceci.items = this.studentlistservice.getStudent () ... . Vous essayez d'assigner abonnement objet à ceci.items . http (asynchrone) est terminé. Et quand il est terminé, votre liste déroulante devrait charger automatiquement ces éléments. Si vous essayez de l'imprimer à l'extérieur S'abonner Block, il vous donne indéfini.
ngOnInit() {
setTimeout(()=>
{
this.studentListService.getStudent().subscribe(response =>{
this.items = response;
},error=>{
console.log(error);
});
},1000);
}
C'est toujours agréable de mettre des explications lorsque vous donnez une réponse.
Vous ne pouvez y accéder qu'une fois que l'appel
http (asynchrone) est terminé. Et quand il est terminé, votre liste déroulante devrait charger automatiquement ces éléments. Si vous essayez d'imprimer IT ITTIDES'abonner Block, il vous donne non défini.Alors, comment attendre que l'appel soit terminé? Où devrais-je mettre le code qui remplit la liste déroulante?
Une fois que l'appel asynchrone est terminé
ceci.items se liera automatiquement aux déposer.Je vois que les noms de méthode utilisés dans le composant et le service sont différents. J'espère que c'est une faute de frappe.
@Amit où devrais-je dire exactement le code qui lie les données à la liste déroulante?
@bluepiranha pouvez-vous s'il vous plaît montrer comment vous liez les données?