Boucle via une série d'objet JSON avec *ngFor (Angulaire 4)
Je veux parcourir un tableau d'objets, ce qui est dans mon fichier json.
Json
[
{
"name": "Mike",
"colors": [
{"name": "blue"},
{"name": "white"}
]
},
{
"name": "Phoebe",
"colors": [
{"name": "red"},
{"name": "yellow"}
]
}
]
html
<div *ngFor="let person of persons">
<p>{{person.name}}</p> <!-- this works fine-->
<p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
{{color.name}}
</p>
</div>
Je ne peux pas accéder au tableau de couleurs d'une personne. Comment puis-je y parvenir?
Je l'ai déjà regardé ces postes, mais les solutions d'entre eux ne pouvaient pas m'aider:
Angular2 ngFor Itération sur JSON
Angular2 - *ngFor /boucle d'objet json avec le tableau
- let la couleur de la personne.couleurs. Le vote de fermer faute de frappe.
- Double Possible de stackoverflow.com/q/988363/3993662
- désolé j'ai oublié dans mon post ici, mais je l'ai dans mon code, donc ça ne peut pas être le problème
- Nope, l'ouverture de la console sera immédiatement rendement de l'erreur et la solution de @Pac0
- Fermer le premier paragraphe. Vérifiez votre console pour les messages d'erreur.
- Ok, maintenant que votre exemple de code est fixe, nous vous avons montré qu'il n'y a rien de mal dans le code que vous avez indiqué. Le problème réside probablement dans la façon dont vous affectez votre objet à la variable
persons
. Veuillez ajouter le code nécessaire pour reproduire le problème, (un un minimum de reproductibles exemple ) .
Vous devez vous connecter pour publier un commentaire.
Votre code (la partie que vous avez indiqué) fonctionne très bien (voir le plunker lien ci-dessous).
Que la seule chose que pas indiqué dans votre question, c'est la façon dont vous attribuez à l'option Javascript de votre Objet à la variable
persons
, je vous exhorte à vous montrer plus de code /rechercher le problème.https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview
persons
quelque part avec quelque chose d'autre ?Angulaire 6.1+ , vous pouvez utiliser la valeur par défaut de la pipe
keyvalue
( Consulter aussi ) :TRAVAIL DE DÉMONSTRATION
Précédemment : Comme vous dites :
Angular2 - *ngFor /boucle d'objet json avec le tableau , ce n'est pas vous aider à
Vous n'avez pas besoin de cela, parce que votre code fonctionne correctement , veuillez vérifier
TRAVAIL DE DÉMONSTRATION