使用 ngFor 迭代 Json 对象答案

【问题标题】：Iterate a Json Object with ngFor使用 ngFor 迭代 Json 对象
【发布时间】：2017-07-05 20:09:04
【问题描述】：

我从网络服务器获得以下 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>

【问题讨论】：

“使用 ngFor 迭代 Json 对象” 你不会。首先，您将 JSON（一个字符串）解析为一个对象（不再是 JSON）。然后您可以迭代该对象的属性。
也许我的标题有误，但描述应该清楚我想要达到的目标。
我根据猜测发布了一个答案，但我也认为完全不清楚问题是什么或问题是什么。您的代码将 `*ngFor 与数组一起使用，但您写的是使用对象对其进行使用。
您可以在模板中使用 JavaScript 对象，如果您在组件中像 Object=Object 一样传递它，请在此处查看我的答案：stackoverflow.com/a/45880507/3853300

标签： json angular ionic2

【解决方案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>

对于 Angular 6，请参阅 How to iterate object keys using *ngFor

【讨论】：

这种结构我见过几次。但我很少理解它。会很好，当你可以更具体的时候。我在这个管道中使用的 JSON 对象在哪里？我是否为它声明了一个单独的类？如果是，我如何在我的特定课程中使用它？
Ups，忘记使用管道 (| keys)。每个成员将被传递给transform，返回的键将由*ngFor 使用，然后由member[key] 用于获取键的值。
所以我稍后用member[key].name 得到值？
不，不是 key.name 和 member[key] （key 将变为 name，age，grade，active）
Angular 团队有不同的看法。不包括在内是一个深思熟虑的决定。