Angular NgFor使用报错：仅支持可迭代类型，无法处理对象

Hey there! Let's break down why you're hitting this error and how to fix it quickly.

What's the Problem? #

The error message spells it out clearly: NgFor only works with iterable types like Arrays, but right now you're trying to loop over a plain JavaScript object ([object Object]). Angular can't iterate over objects directly with *ngFor, which is why you're seeing this issue.

How to Fix It #

Let's go through the most common scenarios and solutions based on your code snippet:

1. Ensure heroes is Declared as an Array

Looking at your heroes.component.ts code, make sure you're declaring heroes as an array of Hero objects, not a generic object. Here's how to adjust it:

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 {
  // Declare heroes as an array of Hero type
  heroes: Hero[];

  ngOnInit(): void {
    // Assign the mock array (HEROES) to heroes
    this.heroes = HEROES;
  }
}

Double-check that mock-heroes.ts exports an array, like this:

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 1, name: 'Superman' },
  { id: 2, name: 'Batman' },
  // ... more hero entries
];

2. Extract the Array from an API Response (If Applicable)

If you're fetching heroes from an API and the response wraps the array in an object (e.g., { data: [hero1, hero2] }), you need to extract the array before assigning it to heroes:

// Example with a service call
this.heroService.getHeroes().subscribe((response) => {
  // Replace 'data' with the actual key holding your array
  this.heroes = response.data;
});

3. Convert an Object to an Array (As a Last Resort)

If you absolutely have to work with an object (e.g., data comes in a key-value format), convert it to an array first. You can use Object.values() to get an array of the object's values:

// In your component
heroesArray: Hero[];

ngOnInit(): void {
  // Suppose your original data is an object like { 0: hero1, 1: hero2 }
  const heroesObject = { /* your object data */ };
  this.heroesArray = Object.values(heroesObject);
}

Then in your template:

<div *ngFor="let hero of heroesArray">
  {{ hero.id }} - {{ hero.name }}
</div>

Pro tip: Avoid doing this conversion directly in the template (like *ngFor="let hero of Object.values(heroes)") unless necessary—keep template logic minimal!

Quick Check #

Before running your app, verify that heroes is indeed an array. You can add a console.log(this.heroes) in ngOnInit() to confirm its type in the browser's developer tools.

内容的提问来源于stack exchange，提问作者Harmandeep Singh Kalsi