使用ngFor迭代Json对象 [英] Iterate a Json Object with ngFor
本文介绍了使用ngFor迭代Json对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我从网络服务器获取以下JSON字符串。
I get from a webserver the following JSON String.
[
{"name":"Joe Lincoln","age":"42","grade":"9","active":"1"},
{"name":"Jack Smith","age":"38","grade":"8","active":"1"},
{"name":"Peter Smith","age":"42","grade":"9","active":"0"},
{"name":"Eva Lorens","age":"42","grade":"8","active":"1"},
]
我想在HTML中公开JSON,我尝试了以下但是字段没有被填充,我也是得到No Exception,所以我很难找出它为什么不起作用。
I want public the JSON in HTML, I tried the following but the fields get not be filled, I also get No Exception, so its very difficult for me to find out why its not working.
TS
this.servletService.webserviceCall('MemberUnit', 'getMembers', params).then((obs)=>{
obs.subscribe(
(data) => {
this.members = JSON.parse(data);
});
})
HTML
<ion-item *ngFor="let member of members">
<ion-avatar item-left>
<svg width="75px" height="75px" >
<text x="50%" y="50%" text-anchor="middle" stroke="#2980b9" stroke-width="2px" dy=".1em">{{member.grade }}</text>
</svg>
</ion-avatar>
<h2>{{member.name}}</h2>
<h3>{{member.age}}</h3>
</ion-item>
推荐答案
您可以使用<$从对象获取密钥c $ c> Object.keys (需要IE AFAIK中的polyfill)
You can get the keys from an object using Object.keys
(requires polyfill in IE AFAIK)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
transform(value): any {
if(!value) return null;
return Object.keys(value);
}
}
<div *ngFor="let key of member | keys">{{member[key]}}</div>
对于 Angular 6 ,请参阅如何使用* ngFor迭代对象键
这篇关于使用ngFor迭代Json对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文