首页 文章

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

提问于
浏览 次
1

我有一个型号：

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);
  }
}

App 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

2 回答

  • 2

    看起来成员是一个对象 .

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

    <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>
    回复于
  • 0

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

    回复于

相关问题