Arrays 使用*ngFor of angular遍历对象数组

数组由一对对象的键和值组成。我希望遍历以获取对象的键和值

var arr = [{fruit: banana},{color: red},{city: London},{count: 10},{price: 100$}];

我试着使用keyvalue管道

<div class="bx--row" *ngFor="let obj of arr | keyvalue; let i = index;">
     <span class="bx--col-xs-5 bx--col-md-5"> {{obj.key}} :</span>
     <span class="bx--col-xs-5 bx--col-md-5">{{obj.value}} </span>
</div>

---

您可能需要两个

*ngFor

指令。试试下面的方法

{{item.key}}：
{{item.value}}

或者，您可以将各个对象合并到控制器中的单个对象，并使用单个

*ngFor

对其进行迭代

控制器

const arr=[{fruit:'banana'}，{color:'red'}，{city:'London'}，{count:10}，{price:'100$}]；
const obj=Object.assign（{}，…arr）

模板

{{item.key}}：
{{item.value}}

你可以这样做

在html中

<div class="bx--row" *ngFor="let obj of arr">
     <span class="bx--col-xs-5 bx--col-md-5"> {{objectKeys(obj)}} :</span>
     <span class="bx--col-xs-5 bx--col-md-5">{{obj[objectKeys(obj)]}} </span>
</div>

---

这回答了你的问题吗？

<div class="bx--row" *ngFor="let obj of arr">
     <span class="bx--col-xs-5 bx--col-md-5"> {{objectKeys(obj)}} :</span>
     <span class="bx--col-xs-5 bx--col-md-5">{{obj[objectKeys(obj)]}} </span>
</div>

objectKeys(obj){
 return Object.keys(obj)[0];
}