如何在Angular 2中迭代Object属性

Question

这是我的对象(它有n个动态键.我在下面的例子中只显示了两个)

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>

但上述似乎不起作用.我做错了什么,语法是正确的？

Answer 1

你可以这样做:

<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]});
}

Answer 2

对@ 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>

Answer 3

从6.1版开始，Angular提供了一个KeyValue管道：

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

这使得使用Object.keys引用或其自身实现的先前变通办法过时了。