J'essayais de charger un composant enfant basé sur des données qui récupéreront par HTTP Obtenir un appel. J'utilisais un service pour faire l'appel HTTP et vous abonner sur le constructeur du composant. Mais le NGIF appelait avant la récupération des données.
Ainsi, j'ai appliqué un tuyau async dans le NGIF, mais il déclenche une autre erreur.
code de service: constructeur de composant: modèle NGIF: ci-dessus génère une erreur: et il génère une erreur:
3 Réponses :
En cas de manipulation de la réponse ASYNC et de la liaison du modèle, vous pouvez utiliser un opérateur de navigation sécurisé aussi bien comme celui-ci -
<app-beforecontest *ngIf="contest.startTime | async"></app-beforecontest>
Oui, il masque l'erreur mais toujours le modèle NGIF vérifie les données avant de récupérer le HttpCall. Donc, mon problème principal ne résout pas.
Quelle est la réponse que vous obtenez dans la console pour console.log (this.contest); ?
ideone.com/ypgppx voir ici pour la première console Connexion dans le concours Subscribe Impression à juste titre mais pour la deuxième console Connectez-vous qu'il est indéfini
Parce que votre méthode renvoie de résultat asynchrone, c'est la raison pour laquelle la deuxième console n'est pas définie. et la première console n'exécutera que lorsque votre requête retourne le succès.
Mais cela ne résout pas mon problème. Alors quelle est la solution?
Pouvez-vous me mettre à jour avec votre première sortie de console? Dans l'image de partage, il montre son vide
@lazyfahim au moins vous devriez supprimer le bowvote pour l'instant.
Vous pouvez définir la valeur initiale de ceci.Contest sur NULL dans votre composant.ts et dans le template, vérifiez comme suit ceci: P> <app-beforecontest *ngIf="(myObservable$ | async).startTime < date"></app-beforecontest>
"stress très étrange" - c'est une comparaison, une partie de l'expression conditionnelle, peut-être plus claire comme ... heure de début
Le tuyau ASYNC doit être utilisé sur un observable, j'ai créé un simple Stackblitz pour le montrer: HTTPS : //stackblitz.com/edit/angular-tx7g36
Le code principal que vous devez modifier est dans le composant lui-même au cas où vous vous demanderiez sur le $ à la fin de la propriété du concours, c'est une notation pour distinguer un observable d'autres types de données.
Le tuyau ASYNC fonctionne sur Observables , on ne sait pas pourquoi vous avez attendu que cela fonctionne comme ça.