I get this error when using the below code:
Cannot find a differ supporting object '[object Object]' of type 'object'.
Is there any way to workaround this problem when doing nested ngFor ?
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="results">
<div *ngFor="let mem of members">
{{mem.id}}
<div class="card-container">
<div *ngFor="let case of mem.cases">
{{case.id}}
</div>
</div>
</div>
</div>
`,
})
export class AppComponent implements OnInit {
public members = { "members": [
{ "name" : "Ana", "id" : "001",
"cases" : [
{"id" : "992", "casenumber" : "882"},
{"id" : "242", "casenumber" : "344"},
]} ,
{ "name" : "Ina", "id" : "002",
"cases" : [
{"id" : "532", "casenumber" : "234"},
{"id" : "734", "casenumber" : "346"},
]} ,
{ "name" : "Ora", "id" : "003",
"cases" : [
{"id" : "235", "casenumber" : "974"},
{"id" : "458", "casenumber" : "125"},
]}
]
}
ngOnInit(){
console.log(this.members);
}
}
Your top level iteration is wrong, the array you want to iterate is inside members.members, so it should be:
<div *ngFor="let mem of members.members"> // here
{{mem.id}}
<div class="card-container">
<div *ngFor="let case of mem.cases">
{{case.id}}
</div>
</div>
</div>
You loop over an objet not an array , so you should point on that array by swtiching to:
<div *ngFor="let mem of members.members">
change
<div *ngFor="let mem of members">
to
<div *ngFor="let mem of members.members">