After retrieving this array from my database :
https://i.sstatic.net/OKrCH.png
This function is used to fetch the data :
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;
)
}
I am trying to display members using ngFor in Angular. Here's what I've attempted (first ngFor is for teams - second one is for members) :
<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>
The error message received for let member of item.member is as follows :
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Each team has a name:string and contains members within it.
export Interface Teams {
name: string;
}
export Interface Members {
name: string;
}
Initially, a team is uploaded - for instance "Programmers". Subsequently, members are added to that Team resulting in the following structure :
8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}