Angular4 NgFor仅支持绑定到Iterables，例如Arrays错误

Question

我有一个模特：

  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。

我究竟做错了什么？我只想迭代团队属性，并访问它的子项及其属性。

Answer 1

看起来成员是一个对象。

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

<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>

Answer 2

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