[英]Iterate a Json Object with ngFor
我從網絡服務器獲得以下JSON字符串。
[
{"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,所以我很難找出它為什么不起作用。
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)
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迭代對象鍵
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.