NG0900：尝试比较"[对象对象]"时出错。只允许数组和可迭代对象

Question

与Angular项目打成一片，我从Minecraft API获取数据并将其写在我的网站上。第一次处理Angular的HTTP请求。

我遇到了错误代码；

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

我已经在谷歌上搜索了整整30分钟，我似乎不明白这个问题是从哪里来的，以及我必须做些什么来解决它

无论如何，这是我的代码文件：

护身符.服务.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;
}

护身符.组件.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 {}
}

护身符.component.html

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

谢谢！

Answer 1

*ngFor只接受数组和可迭代项。

假设您的服务('https://sky.shiiyu.moe/api/v2/talismans/pumbalo/pomegranate'(中使用的API URL返回类似以下的内容

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

您需要访问一个数组字段(如"accessories"字段(使用CCD_ 3。

如果模型没有反映API端点，那么在模型中定义的类型无关紧要。