J'essaie d'afficher les valeurs extraites de mon API dans le composant. Au moment où l'API répond avec les données, ma page s'affiche et je ne suis jamais capable d'afficher la liste des éléments. Pourriez-vous me laisser savoir comment je peux résoudre ce problème et afficher les valeurs de ma page HTML?
Voici mon appel API P>
[{podId: "12345", podName: "sample1", podType: "Project Pod"},
{podId: "45454"podName: "sample2"podType: "Project Pod"},
{podId: "43543543", podName: "sample3", podType: "Delivery Pod"}]
4 Réponses :
Si vous souhaitez rendre les résultats, vous devez utiliser le tuyau Le < Code> Le tuyau JSON affichera toute la structure de l'objet sur votre HTML
par exemple ou Utilisez les propriétés de l'objet: Vous pouvez utiliser n'importe lequel Propriété que vous souhaitez afficher, c'est à l'intérieur de l'objet que vous souhaitez rendre Documents angulaires
https://angular.io/guide/displaying-Data FYI Il existe plusieurs moyens de lier des données dans votre reliure de propriété HTML , la liaison d'événement et la liaison de données bidirectionnelle. JSON et vous devez utiliser {{}} pour lier vos données.
Bonjour Patricio, merci de répondre. Je comprends la partie d'affichage. Excusez-moi de ne pas avoir été clair. Mon problème est avec les noms d'allégement. Il se présente toujours comme vide au lieu du résultat. Je peux le voir dans la console. Mais cela ne s'affiche pas dans HTML. On dirait que la page est affichée avant même que la valeur soit définie dans le composant. J'ai besoin d'aide sur l'obtention des associatifs d'obtenir les données de ma page HTML.
Vous pouvez faire de différentes manières que vous pouvez utiliser le tuyau async ou vous pouvez avoir une vérification * NGIF si la valeur de la matrice est plus grande que 0. Si cela ne fonctionne pas, jetez un oeil à la ngafteroninit () cycle de la vie
Vous devez utiliser des bretelles à double frisement comme ceci: {{pods.property}} pour lier un contenu à sens unique
Vous avez pods code> en référence à chaque objet dans le conteneur. Vous avez besoin d'une expression angulaire {{}} dans le conteneur pour afficher les valeurs de sortie: <ng-container *ngFor="let pods of associatedPodNames">
<p>{{pods.podName}}</p>
</ng-container>
associatedTeamIds: [
"12345",
"45454",
"43543543"
]
ngOnInit() {
this.getTeamInfo();
}
public getTeamInfo(): Array<IPodDetails> {
for (let i = 0; i < this.associatedTeamIds.length; i++) {
this.searchService.searchTeamInfo(this.associatedTeamIds[i]).subscribe(res => {
this.associatedPodNames = this.associatedPodNames.concat(res);
console.log(this.associatedPodNames);
},
);
}
}
Essayez
{{pods.podname}} dans le conteneur.Salut Andy, merci d'avoir répondu. Je comprends la partie d'affichage. Excusez-moi de ne pas avoir été clair. Mon problème est avec les noms d'allégement. Il se présente toujours comme vide au lieu du résultat de l'API. Je peux le voir dans la console. Mais cela ne fait que la valeur HTML. On dirait que la page est en cours de rendu avant même que la valeur soit définie dans le composant. J'ai besoin d'aide pour que les associatifspodnames reçoivent les données du composant dans ma page HTML.