Açısal 2 aşağıdaki kodu kullanırken bu hatayı alıyorum ngFor

Question

iç içe kullanarak.

Yuvalanmış ngFor uygularken bu sorunu geçici olarak çözmenin bir yolu var mı?

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); 
    } 
} 

Answer 1

Sizin üst düzey yineleme sen yineleme istediğiniz dizi içeride members.members olduğu yanlış, bu nedenle olmalıdır:

<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> 

Answer 2

değişiklik

<div *ngFor="let mem of members"> 

için

<div *ngFor="let mem of members.members"> 

Answer 3

Bir döngü üzerinde n objet bir dizi değil, bu diziyi şu şekilde işaretlemelisiniz:

<div *ngFor="let mem of members.members">