Angular调用Minecraft API遇NG0900报错，求解决方案

我正在开发一个Angular项目，调用Minecraft API获取数据并展示，这是我第一次使用Angular的HTTP请求，运行时遇到以下错误：

NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

已经搜索了30分钟仍未明确问题根源及解决方法，以下是我的代码文件：

talismans.service.ts #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import { Talismans } from '../interfaces/talismans';

@Injectable({
  providedIn: 'root',
})
export class TalismanService {
  private apiUrl =
    'https://sky.shiiyu.moe/api/v2/talismans/pumbalo/pomegranate';

  constructor(private http: HttpClient) {}

  public getTalismans(): Observable<Talismans[]> {
    return this.http.get<Talismans[]>(this.apiUrl);
  }
}

talismans.ts（接口） #

export interface Talismans {
  profile_id: string;
  cute_name: string;
  accessories: Accessory[];
}

export interface Accessory {
  isUnique: boolean;
  isInactive: boolean;
  id: number;
  Count: number;
  tag: Tag;
  Damage: number;
  extra: Extra;
  display_name: string;
  texture_path?: string;
  rarity: string;
  categories: string[];
  recombobulated: boolean;
  dungeon: boolean;
  shiny: boolean;
  item_index: number;
  itemId: string;
  base_name: string;
  reforge?: string;
  containsItems?: ContainsItem[];
}

export interface Tag {
  HideFlags: number;
  SkullOwner?: SkullOwner;
  display: Display;
  ExtraAttributes: ExtraAttributes;
  ench?: any[];
}

export interface SkullOwner {
  Id: string;
  Properties: Properties;
}

export interface Properties {
  textures: Texture[];
}

export interface Texture {
  Value: string;
}

export interface Display {
  Lore: string[];
  Name: string;
}

export interface ExtraAttributes {
  modifier?: string;
  originTag?: string;
  id: string;
  uuid: string;
  timestamp: string;
  personal_compact_0?: string;
  personal_compact_2?: string;
  personal_compact_1?: string;
  personal_compact_4?: string;
  personal_compact_3?: string;
  personal_compact_6?: string;
  personal_compact_5?: string;
  new_year_cake_bag_data?: number[];
}

export interface Extra {
  hpbs: number;
  timestamp: number;
  reforge?: string;
}

export interface ContainsItem {
  isInactive: boolean;
  inBackpack: boolean;
  item_index: number;
  backpackIndex: number;
  rarity: any;
  categories: any[];
  itemId: string;
}

talismans.component.ts #

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

import { TalismanService } from '../../services/talismans.service';
import { Talismans } from '../../interfaces/talismans';

@Component({
  selector: 'app-talismans',
  templateUrl: './talismans.component.html',
  styleUrls: ['./talismans.component.css'],
})
export class TalismansComponent implements OnInit {
  talisman: Talismans[] = [];

  constructor(private talismanService: TalismanService) {
    this.talismanService.getTalismans().subscribe((resp) => {
      this.talisman = resp;
    });
  }

  ngOnInit(): void {}
}

talismans.component.html #

<div *ngFor="let talismans of talisman">
  <p>{{ talisman }}</p>
</div>

问题原因 #

NG0900错误的核心是：*ngFor指令仅支持遍历数组或可迭代对象，但你调用的API返回的是单个Talismans对象，而非数组。你错误地将返回值赋值给了数组类型的变量talisman，导致*ngFor无法执行遍历操作。

修复步骤 #

1. 修正服务的返回类型
   修改talismans.service.ts中的方法返回类型，从数组改为单个对象：

   public getTalismans(): Observable<Talismans> {
     return this.http.get<Talismans>(this.apiUrl);
   }
   

2. 调整组件变量类型
   在talismans.component.ts中，将talisman的类型改为单个对象，并添加空值处理：

   talisman: Talismans | null = null;
   
   constructor(private talismanService: TalismanService) {
     this.talismanService.getTalismans().subscribe((resp) => {
       this.talisman = resp;
     });
   }
   

3. 修改模板的遍历逻辑
   实际需要遍历的是对象中的accessories数组，同时添加*ngIf确保数据加载完成后再渲染：

   <div *ngIf="talisman">
     <h3>角色名称: {{ talisman.cute_name }}</h3>
     <div *ngFor="let accessory of talisman.accessories">
       <p>{{ accessory.display_name }}</p>
     </div>
   </div>
   

额外优化建议 #

• 添加错误处理便于调试：

  this.talismanService.getTalismans().subscribe({
    next: (resp) => this.talisman = resp,
    error: (err) => console.error('API请求失败:', err)
  });
  

• 使用async管道简化订阅逻辑，避免内存泄漏：

  // 组件中定义Observable变量
  talisman$: Observable<Talismans>;
  
  constructor(private talismanService: TalismanService) {
    this.talisman$ = this.talismanService.getTalismans();
  }
  

  模板中使用：

  <div *ngIf="talisman$ | async as talisman">
    <h3>角色名称: {{ talisman.cute_name }}</h3>
    <div *ngFor="let accessory of talisman.accessories">
      <p>{{ accessory.display_name }}</p>
    </div>
  </div>
  

内容的提问来源于stack exchange，提问作者simon sjöö