角2使用嵌套ngFor

Question

使用下面的代码时，我得到这个错误：

无法找到一个不同支承对象类型“对象”的“[对象的对象]”。

有什么办法解决这个问题时做嵌套的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); 
    } 
} 

Answer 1

你的顶级迭代是错误的，你要遍历数组里面members.members，所以它应该是：

<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

变化

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

到

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

Answer 3

你循环一遍n objet不是阵列，因此您应该通过切换指向该阵列：

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