web-dev-qa-db-ja.com

Angular 2のオブジェクト属性を反復処理する方法

これが私のオブジェクトです（n個のダイナミックキーがあります。以下の例では2つしか表示していません）

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

}

上記をループスローしてすべての値を出力する私の試みはここにあります

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

しかし、上記はうまくいかないようです。私は何を間違っていますか、正しい構文は何ですか？

javascriptloopsangulariterationngfor
22
user6123723

次のようなことができます：

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

generateArrayは次のようになります。

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

@ eg16の答えをわずかに変更し、それが私にとって魅力のように働いた-

generateArray関数は次のようになります。

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

およびテンプレート-

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

バージョン6.1以降、Angularで KeyValue Pipe が利用可能になりました。

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

これにより、Object.keys参照を使用した以前の回避策またはその実装は廃止されます。

7
Jens Habegger