json - 使用 ngFor 迭代一个 Json 对象

Question

我从网络服务器获取以下 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，我尝试了以下但字段没有被填充，我也没有异常，所以我很难找出它不起作用的原因。

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>

Answer 1

您可以使用 Object.keys 从对象中获取 key (在 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，请参阅 How to iterate object keys using *ngFor