使用ngFor迭代一个Json对象

Question

我从web服务器获取到以下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"},
]

我希望将JSON公开在HTML中，我尝试过以下方法，但是字段无法填充。我也没有遇到任何异常，所以很难找出为什么它不起作用。 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>

- Sandruna

---

“使用ngFor迭代Json对象”你不会这样做。首先，你需要将JSON（一个字符串）解析成一个对象（不再是JSON）。然后，你可以迭代该对象的属性。 - T.J. Crowder

也许我的标题有误，但是描述应该很清楚我想要达到的目的。 - Sandruna

我根据猜测发布了一个答案，但我也认为问题完全不清楚是关于什么或者问题是什么。你的代码使用了*ngFor与一个数组，但你写的是用它与一个对象。 - Günter Zöchbauer

如果你在组件中传递 Object=Object，那么你可以在模板中使用 JavaScript 对象，请参考我的答案：https://dev59.com/CFgR5IYBdhLWcg3wXcem#45880507 - Sheki

Answer 1

您可以使用Object.keys从一个对象中获取键（在IE中需要填充）。

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迭代对象键

- Günter Zöchbauer

---

我几次看到这种结构。但我很少理解它。如果你能更具体一些就好了。我的 JSON 对象在这个管道中是用在哪里的？我是否需要为它声明一个单独的类？如果是，我该如何在我的特定类中使用它？ - Sandruna

哎呀，忘记使用管道（| keys）了。每个成员都将被传递给 transform，返回的键将被 *ngFor 使用，然后由 member[key] 获取键的值。 - Günter Zöchbauer

那么我之后可以通过 member[key].name 获取值，例如？ - Sandruna

不是使用 key.name，而是使用 member[key]（其中 key 可以是 name、age、grade 或 active）。 - Günter Zöchbauer

Angular团队有不同的看法。这是一个故意的决定，不包括那个。 - Günter Zöchbauer