Góc 2 sử dụng lồng nhau ngFor

Question

Tôi gặp phải lỗi này khi sử dụng mã bên dưới:

Không thể tìm thấy đối tượng hỗ trợ khác 'đối tượng' thuộc loại 'đối tượng'.

Có cách nào giải quyết vấn đề này khi thực hiện lồng nhau không?

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

mức lặp đầu của bạn là sai, các mảng bạn muốn lặp là bên trong members.members, vì vậy nó cần được:

<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

thay đổi

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

để

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

Answer 3

Bạn lặp lại một n objet không phải là một mảng, vì vậy bạn nên trỏ vào mảng đó bằng cách swtiching để:

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