Messing around with a Angular project where I grab data from an Minecraft API and write it out on my website. First time working with Angular's HTTP requests.

I ran into the error code;

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

I have googled around for a solid 30 minutes now and I cannot seem to understand where the issue comes from, and what I have to do to fix it.

Anyways, here is the files for my code:

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 (interface)

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>

Thanks!

CodePudding user response：

*ngFor only accepts arrays and iterables.

Given that the API URL used in your service ('https://sky.shiiyu.moe/api/v2/talismans/pumbalo/pomegranate') returns something like the following

{
    "profile_id": "bac44f0b7d7444faab850acfdb0bca58",
    "cute_name": "Pomegranate",
    "accessories": [
        {
            "isUnique": true,
            "isInactive": false,
            "id": 397,
            "Count": 1,
        },
        ...
    ],
    ...
}

You need to access a field that is an array (like the "accessories" field) to use *ngFor.

It does not matter what type you defined in your models if the models do not reflect the API endpoint.