Angular NgFor Issue

Question

I am trying to display the list of the object having id and name using NgFor directive but i am getting below error :

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Below are the codes files for reference .

`heroes.component.ts:

This file has heroes object declared.

import { Component, OnInit } from '@angular/core';

  import { Hero } from '../hero';

  import { HEROES } from '../mock-heroes';
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })

  export class HeroesComponent implements OnInit {   
    heroes = HEROES;
  }

heroes.component.html:

This is the file where I am using NgFor in

tag .

  <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> 

mock-heroes.ts:

This files contains the constant object of the heroes that i want to be displayed on UI.

  import {Hero} from './hero'; export const HEROES: Hero[] ={ {id:11 , name:'Mr. Nice'}, {id:12 , name:'Narco'}, {id:13 , name:'Bombasto'} }; 

Can you please help me here ?

Answer 1

ngFor doesn't support object try this below :

export const HEROES: Hero[] =[

     {id:11 , name:'Mr. Nice'},
     {id:12 , name:'Narco'},
     {id:13 , name:'Bombasto'}
];

Answer 2

As the error denotes

Cannot find a differ supporting object '[object Object]' of type 'object'

Your Heroes should be an array instead of object. change it as,

const HEROES: Hero[] =[
     {id:11 , name:'Mr. Nice'},
     {id:12 , name:'Narco'},
     {id:13 , name:'Bombasto'}
];

STACKBLITZ DEMO

Answer 3

you should define HEROES as an array, with [ ] instead of { } as the outer enclosing braces :

[
  { ... },
  { ... },
]

instead of

{
  { ... },
  { ... },
}