Angular中ngFor无法展示REST返回的嵌套JSON数据求助

问题根源 #

你当前的代码错误处理了API返回的JSON结构：

• API返回的是包含items数组的对象，而非直接的数组
• 组件里用Array.of(this.wishlist)把整个响应对象包装成了数组，导致this.wishlist变成[{items: [...]}]的结构
• 模板遍历这个包裹后的数组时，每个遍历项是整个响应对象，它本身没有name/year/country这些属性，所以页面只显示字段名无实际值

修正后的组件代码 #

wishlist: any = [];
url: string = 'xxx'

getWishlist(){
  this.http.get(this.url,this.httpOptions).subscribe((response: any)=>{
    // 直接取响应对象里的items数组赋值
    this.wishlist = response.items;
    console.log(this.wishlist);
  });
}

修正后的模板代码 #

（建议把遍历变量名改成item，避免和数组名wishlist重名，减少混淆）

<div *ngFor="let item of wishlist">
  <h1>name ~ {{item.name}}</h1>
  <h1>year ~ {{item.year}}</h1>
  <h1>country ~ {{item.country}}</h1>
</div>

额外优化建议 #

• 如果API返回的items可能为null或undefined，可以加空值保护：this.wishlist = response.items || [];
• 尽量避免用any类型，建议定义接口约束数据结构，提升代码可读性和类型安全：

  interface WishItem {
    id: number;
    name: string;
    year: string;
    country: string;
    links: Array<{rel: string; href: string}>;
  }
  
  wishlist: WishItem[] = [];
  

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