Angular 2 Firebase как получить массив в объекте

Question

Я получаю этот массив из своей базы данных:

С помощью этой функции:

getMembers(){
  this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
    map(changes =>
      changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
    )
  ).subscribe((data:any) => 
    console.log(data)
   this.members = data;
    )
}

Как отображать элементыв ngFor?

Моя попытка (первый ngFor - команды, второй - для участников):

<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>

Ошибка для let member of item.member:

Не удается найти другую поддержкуобъект '[объект Object]' типа 'объект'.NgFor поддерживает только привязку к Iterables, таким как массивы.

Команды только - name: string - участники в командах.

export Interface Teams {
name: string;
}

export Interface Members {
name: string;
}

Сначала я загружаю команду - например "Программисты».Затем я добавляю участников в эту команду.И это выглядит так:

8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}

Answer 1

вы получаете ошибку, потому что ваш members является объектом, а объект не повторяем, а *ngFor поддерживает только iterables, например, массивы, карты и т. Д., Так что вы можете:

используйте Object.keys(), который будет возвращать ключи объектов в новом массиве,

ПРИМЕЧАНИЕ , что Object недоступно в шаблоне, поэтому вы должны создать канал илиопределите метод в component.ts, который будет выполнять эту работу, например

objectKeys(obj) {
    return Object.keys(obj);
}

<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>

или другой параметр, который вы можете использовать Object.values(), который будет возвращать значения объектов в новом массиве

objectValues(obj) {
   return Object.values(obj);
}
<div *ngFor="let item of teams">
    <p>{{item.name}}</p>
    <p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>