Angular中NgFor绑定对象报错：仅支持数组等可迭代对象

嘿，我刚踩过几乎一模一样的坑！让我帮你快速理清问题根源，然后一步步搞定它。

首先，先拆解下你看到的报错：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays——说白了就是Angular的*ngFor指令只能遍历数组这类可迭代对象，你现在给它传的是一个普通对象，它没法处理。

咱们来看代码里的问题：

1. API返回结构的误解 #

PokemonTCG API返回的不是直接的卡片数组，而是一个包含cards数组的对象，结构大概是这样的：

{
  "cards": [
    { "id": "card1", "name": "皮卡丘", ... },
    { "id": "card2", "name": "妙蛙种子", ... }
  ]
}

你的ICards接口定义是对的，但Service和Component里的类型声明、数据处理都搞错了方向。

2. 一步步修正代码 #

修正Service代码 #

你的getCards方法返回类型写错了，应该是Observable<ICards>（单个对象），而不是Observable<ICards[]>（对象数组）：

export class PokemonServiceService { 
  constructor(private http: HttpClient) { } 

  // 修正返回类型，同时去掉url末尾多余的?
  getCards(): Observable<ICards>{ 
    return this.http.get<ICards>('https://api.pokemontcg.io/v1/cards'); 
  } 
} 

// 下面的接口定义保持不变即可
export interface Ability { name: string; text: string; type: string; } 
export interface Attack { cost: string[]; name: string; text: string; damage: string; convertedEnergyCost: number; } 
export interface Weakness { type: string; value: string; } 
export interface Resistance { type: string; value: string; } 
export interface Card { id: string; name: string; nationalPokedexNumber: number; imageUrl: string; imageUrlHiRes: string; types: string[]; supertype: string; subtype: string; ability: Ability; hp: string; retreatCost: string[]; convertedRetreatCost: number; number: string; artist: string; rarity: string; series: string; set: string; setCode: string; text: string[]; attacks: Attack[]; weaknesses: Weakness[]; resistances: Resistance[]; evolvesFrom: string; } 
export interface ICards { cards: Card[]; }

修正Component代码 #

• 把PokemonData的类型从ICards[]改成ICards（因为接收的是单个包含cards数组的对象）
• 调用getCards()时要加括号（你之前漏了，this.service.getCards是方法引用，不是执行调用）

export class MainActivityComponent implements OnInit { 
  // 修正类型为ICards，而非ICards[]
  PokemonData: ICards; 

  constructor(private service: PokemonServiceService ){} 

  ngOnInit(): void { 
    // 调用getCards()方法，加括号执行
    this.service.getCards().subscribe(data => {
      this.PokemonData = data;
      console.log(data.cards); // 现在能正确打印卡片数组了
    }); 
  } 
}

修正HTML代码 #

现在PokemonData是一个对象，你需要遍历它内部的cards数组，所以把*ngFor改成遍历PokemonData.cards，同时用安全导航符?避免空值报错：

<div class="card" *ngIf="PokemonData"> 
  <div class="card-header">Pokemon</div> 
  <div class="card-block"> 
    <table class="table table-hover"> 
      <thead> 
        <tr> 
          <th>Naam</th> 
          <th>id</th> 
          <th>hp</th> 
          <th>pokedexnumer</th> 
        </tr> 
      </thead> 
      <tbody> 
        <!-- 遍历PokemonData里的cards数组，用?确保对象存在时才访问属性 -->
        <tr *ngFor="let d of PokemonData?.cards"> 
          <td>{{d.name}}</td> 
          <td>{{d.id}}</td> 
          <td>{{d.hp}}</td> 
          <td>{{d.nationalPokedexNumber}}</td> 
        </tr> 
      </tbody> 
    </table>
  </div>
</div>

关键总结 #

核心问题就是你把API返回的包含数组的对象当成了数组本身来处理，NgFor自然没法遍历对象。只要理清数据结构，把类型声明、数据赋值和遍历目标都修正过来，问题就解决啦！

内容的提问来源于stack exchange，提问作者Inias