使用ngFor迭代Json对象

小编典典

使用ngFor迭代Json对象

json

我从网络服务器获取以下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，我尝试了以下操作，但未填写字段，我也收到了“无异常”，因此我很难找出其不起作用的原因。

  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>

阅读 317

2020-07-27

共1个答案

小编典典

您可以使用来从对象获取键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>

2020-07-27