How can I render this array of objects in Angular?
var list = [{
collaborators: [{
id: 1,
name: "test"
}]
},
{
colleagues: [{
id: 2,
name: "colleague2"
}]
}
]
I tried in this way
<div *ngFor="let el of list">
<div *ngFor="let e of el.collaborators">
{{e.id}}
</div>
</div>
But it doesn't work
Lets break down your list
list[0] will give
{collaborators: [{id: 1, name: "test"}]},
and list[1] will give
{colleagues: [{id:2, name: "colleague2"}]}
Lets now loop
<div *ngFor="let e of list[0].collaborators">
{{e.id}}
</div>
<div *ngFor="let e of list[1].colleagues">
{{e.id}}
</div>
We can also combine them like
<div *ngFor="let e of list">
<ng-container *ngIf=' e.collaborators'>
<div *ngFor='let collaborator of e.collaborators'>
{{ collaborator.id }}
</div>
</ng-container>
<ng-container *ngIf=' e.colleagues'>
<div *ngFor='let colleague of e.colleagues'>
{{ collaborator.id }}
</div>
</ng-container>
</div>
You are missing (let e) :
<div *ngFor="let e of el.collaborators">
{{e.id}}
</div>
collaboratorsandcolleagues. And inHTMLyou are accessing onlycollaborators.