如何遍历Angular 2中的对象属性

Posted 2023-02-22

【中文标题】如何遍历Angular 2中的对象属性

【英文标题】：How to iterate through an Object attributes in Angular 2

【发布时间】：2016-12-27 19:48:43

【问题描述】：

这是我的对象（它有 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>

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

【问题讨论】：

你试过obj[i]而不是obj.i吗？

【参考方案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]);

【讨论】：

@Aarmora 很高兴知道它对您有帮助。 :)

但是不允许在angular2中让obj的o，因为obj不可迭代，对吗？

【参考方案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>

【参考方案3】：

从 6.1 版开始，Angular 提供了KeyValue Pipe：

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

这使得以前使用 Object.keys 引用或其自己的实现的变通办法已过时。