使用 angular 的 *ngFor 遍历对象数组

Question

该数组由对象的键和值对组成。我想遍历以获取 object 的键和值。

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

我尝试使用键值 pipe

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

预期结果：

fruit : banana
color: red
city: London
count : 10
price : 100$

Answer 1

您可能需要两个*ngFor指令。 尝试以下

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

或者，您可以将单个对象合并到 controller 中的单个 object 并使用单个*ngFor进行迭代。

Controller

const arr = [{fruit: 'banana'},{color: 'red'},{city: 'London'},{count: 10},{price: '100$'}];
const obj = Object.assign({}, ...arr)

模板

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

Answer 2

你可以这样做

在 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>

在 ts

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