Angular4 NgFor поддерживает привязку только к Iterables, например к ошибкам массивов

У меня есть модель:

  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"
            }
         ]
      }
   ]
}

Это вызывает у меня ошибку. Невозможно найти другой поддерживающий объект "[объект объекта]" типа "объект". NgFor поддерживает привязку только к Iterables, таким как Arrays.

Что я делаю неправильно? Я просто хотел бы перебрать свойства команд, а также получить доступ к его дочерним элементам и их свойствам.


person Luís Filipe Escobar    schedule 27.12.2017    source источник


Ответы (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>
person Deblaton Jean-Philippe    schedule 27.12.2017
comment
привет, но как мы можем через это сделать так, чтобы отображалась только одна команда? - person Keerthi Reddy Yeruva; 06.08.2018

JSON не возвращает членов. JSON возвращает организацию. В организации есть команды, и в каждой команде есть участники. Если вы хотите, чтобы служебная функция возвращала всех участников в каждой команде организации, вам следует добавить эту логику пост-обработки в функцию map (), чтобы преобразовать необработанный ответ JSON в то, что вы ожидаете. Функция map (), вызываемая в службе, позволяет вам легко изменять / преобразовывать необработанный ответ в то, что вы ожидаете в домене, а затем передавать это значение в обратный вызов подписки, определенный в компоненте. Вам также следует подумать о создании модели-члена и сопоставлении необработанных данных с этим интерфейсом в функции сопоставления служебной функции.

person oddz    schedule 27.12.2017