web-dev-qa-db-fra.com

Boucle dans un tableau d'objet JSON avec * ngFor (Angular 4)

Je veux parcourir un tableau d'objets, qui se trouve 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 à la palette de couleurs d'une personne. Comment puis-je y arriver?

J'ai déjà regardé ces posts mais les solutions ne pourraient pas m'aider:

Angular2 ngPour effectuer une itération sur JSON

Angular2 - * ngFor/boucle dans un objet json avec un tableau

arraysjsonangularngfor
4
BlueCat

Votre code (la partie que vous avez affichée) fonctionne bien (voir le plunker lié ci-dessous).

Comme la seule chose qui n'apparaît pas dans votre question est la façon dont vous affectez votre objet Javascript à la variable persons, je vous prie instamment de vous montrer plus de code/de rechercher le problème à cet endroit. 

https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <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>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {

  }

  persons = [
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
  ];
}
3
Pac0

Comme vous le dites:

Angular2 - * ngFor/boucle à travers l'objet json avec array, cela ne pourrait pas vous aider

Vous n’avez pas besoin de cela, car votre code fonctionne bien, veuillez vérifier

DEMO DE TRAVAIL

1
Vivek Doshi