使用 angular 的 *ngFor 遍历对象数组
Iterate through array of objects using *ngFor of angular
该数组由 objects.i 的键和值对组成,想要遍历以获取对象的键和值。
var arr = [{fruit: banana},{color: red},{city: London},{count: 10},{price: 100$}];
我尝试使用键值管道
<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$
您可能需要两个 *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>
或者您可以将单个对象合并到控制器中的单个对象,并使用单个 *ngFor
.
对其进行迭代
控制器
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>
你可以这样做
在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>
秒
objectKeys(obj){
return Object.keys(obj)[0];
}
该数组由 objects.i 的键和值对组成,想要遍历以获取对象的键和值。
var arr = [{fruit: banana},{color: red},{city: London},{count: 10},{price: 100$}];
我尝试使用键值管道
<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$
您可能需要两个 *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>
或者您可以将单个对象合并到控制器中的单个对象,并使用单个 *ngFor
.
控制器
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>
你可以这样做
在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>
秒
objectKeys(obj){
return Object.keys(obj)[0];
}