Angular4 NgFor 只支持绑定到 Iterables 比如 Arrays 错误答案

【问题标题】：Angular4 NgFor only supports binding to Iterables such as Arrays errorAngular4 NgFor 只支持绑定到 Iterables 比如 Arrays 错误
【发布时间】：2018-06-08 12:53:39
【问题描述】：

我有一个模型：

  export class AppComponent implements OnInit{

  members = [];
  constructor(private responseMembers:LobsterService) {

  }

  ngOnInit() {
    this.responseMembers.getMembers().subscribe(responseMembers => 
      this.members = responseMembers.members);
  }
}

我的服务：

@Injectable()

export class LobsterService {
  constructor(private http:Http) {

  }

  private url:string = "http://localhost:4200/assets/data.json";
  getMembers() {
    return this.http.get(this.url).map((response: Response) => response.json());
  }

然后在我的组件中：

export class AppComponent implements OnInit{

  members = [];
  constructor(private responseMembers:LobsterService) {

  }

  ngOnInit() {
    this.responseMembers.getMembers().subscribe(responseMembers => 
      this.members = responseMembers.members);
  }
}

应用 HTML ##

<h1>

    <h3>Organization: {{members.organization}}</h3>
    <h4>Organization Location: {{members.location}}</h4>

    <ul *ngFor="let member of members">
        <li>{{member}}</li>
    </ul>
</h1>

我的 Json：

{
   "organization":"Lobster",
   "location":"Austin",
   "teams":[
      {
         "team":"Lobster Tech",
         "location":"Amsterdam",
         "members":[
            {
               "name":"Ben Samuel",
               "age":29,
               "imageUrl":"https://randomuser.me/api/portraits/men/30.jpg"
            },
            {
               "name":"Ana James",
               "age":39,
               "imageUrl":"https://randomuser.me/api/portraits/women/68.jpg"
            },
            {
               "name":"Edward Finn",
               "age":23,
               "imageUrl":"https://randomuser.me/api/portraits/men/83.jpg"
            }
         ]
      },
      {
         "team":"Lobster Ink",
         "location":"Cape Town",
         "members":[
            {
               "name":"Sam Jones",
               "age":49,
               "imageUrl":"https://randomuser.me/api/portraits/women/30.jpg"
            },
            {
               "name":"Helen Anthony",
               "age":26,
               "imageUrl":"https://randomuser.me/api/portraits/women/48.jpg"
            },
            {
               "name":"Gregg Best",
               "age":21,
               "imageUrl":"https://randomuser.me/api/portraits/men/23.jpg"
            }
         ]
      }
   ]
}

这会引发错误找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

我做错了什么？我只是想遍历团队属性并访问它的子项及其属性。

【问题讨论】：

标签： angular ngfor

【解决方案1】：

看起来 members 是一个对象。

您应该遍历您的团队，然后遍历您的成员

<h1>
    <h3>Organization: {{members.organization}}</h3>
    <h4>Organization Location: {{members.location}}</h4>

    <span *ngFor="let team of members.teams">
        <ul *ngFor="let member of team.members">
            <li>{{member}}</li>
        </ul>
    </span>
</h1>

【讨论】：

你好，但是我们如何才能通过这个只显示一个团队呢？

【解决方案2】：

JSON 不返回成员。 JSON 返回一个组织。一个组织有团队，每个团队都有成员。如果您希望服务函数返回组织的每个团队中的所有成员，那么您应该在 map() 函数中添加该后处理逻辑以将原始 JSON 响应转换为您期望的内容。在服务中调用的 map() 函数允许您轻松地将原始响应更改/转换为您在域中的期望，然后将该值传递给组件中定义的订阅回调。您还应该考虑创建一个成员模型并将原始数据映射到服务函数的映射函数中的该接口。

【讨论】：