Recibo este error cuando uso el siguiente código:
No se puede encontrar un objeto de soporte diferente '[objeto Objeto]' de tipo 'objeto'.
¿Hay alguna forma de solucionar este problema al hacer ngFor anidado?
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); } }Su iteración de nivel superior es incorrecta, la matriz que desea iterar está dentro members.members , por lo que debería ser:
<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>Recorre un objeto, no una matriz, por lo que debe apuntar a esa matriz cambiando a:
<div *ngFor="let mem of members.members">cambio
<div *ngFor="let mem of members">a
<div *ngFor="let mem of members.members">