web-dev-qa-db-fra.com

Comment parcourir les attributs d'un objet dans Angular 2

Voici mon objet (il a n nombre de clés dynamiques. Je n'en ai montré que deux dans l'exemple ci-dessous)

let obj = {
abc:["some text", "some more text"],
xyz:["more text", "what do you think?", "I'm tired now"]

}

Voici ma tentative de boucle jeter ce qui précède et imprimer toutes les valeurs

 <div *ngFor='let item of obj ; let i = index;'>
            <p *ngFor="let value of obj.i">{{value}}
 </div>

Mais ce qui précède ne semble pas fonctionner. Qu'est-ce que je fais mal et quelle est la syntaxe correcte?

javascriptloopsangulariterationngfor
22
user6123723

Vous pouvez faire quelque chose comme ça:

<li *ngFor="let o of obj">
   <p *ngFor="let objArrayElement of generateArray(o)"> {{objArrayElement}} </p>
</li>

où generateArray ressemble à:

generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}
35
etrupja

légère modification de la réponse de @ eg16 et cela a fonctionné comme un charme pour moi -

la fonction generateArray ressemble à ceci-

generateArray(obj){
    return Object.keys(obj).map((key)=>{ return {key:key, value:obj[key]}});
}

et le modèle -

<li *ngFor="let item of generateArray(data)">{{item.key}}: {{item.value}}</li>
23
Avinash

À partir de la version 6.1, un KeyValue Pipe est mis à disposition par Angular:

<li *ngFor="let item of (data | keyvalue)">{{item.key}}: {{item.value}}</li>

Cela rend les solutions de contournement précédentes utilisant des références Object.keys ou leurs propres implémentations obsolètes.

7
Jens Habegger