使用 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,我尝试了以下但没有填写字段,我也没有异常,所以我很难找出它为什么不起作用.
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>
推荐答案
您可以使用 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屋!
查看全文