Angular 2 using nested ngFor

Question

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

AVJT82 · Accepted Answer · 2017-05-03 18:32:37Z

16

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>

answered May 3, 2017 at 18:32

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SeleM · Accepted Answer · 2017-05-03 18:34:49Z

4

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

answered May 3, 2017 at 18:34

SeleM

9,6885 gold badges36 silver badges55 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-05-03 18:32:41Z

3

change

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

to

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

answered May 3, 2017 at 18:32

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Angular 2 using nested ngFor

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related