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 仅支持绑定到 Iterables，例如数组。

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

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

Answer 2

JSON 没有 return 成员。 JSON return 是一个组织。一个组织有团队，每个团队都有成员。如果您希望服务功能 return 组织中每个团队中的所有成员，那么您应该在 map() 函数中添加 post 处理逻辑来翻译原始 JSON 响应达到你的期望。在服务中调用的 map() 函数允许您轻松 mutate/convert 对域中期望的原始响应，然后将该值传递给组件中定义的订阅回调。您还应该考虑创建一个成员模型并将原始数据映射到服务函数的映射函数中的该接口。

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

Angular4 NgFor only supports binding to Iterables such as Arrays error

ngfor

angular

我有一个模型：

我的服务：

然后在我的组件中：

应用HTML##

我的Json: