Question

我要从外部API返回JSON数组对象，该对象要在Angular前端的HTML视图中显示。但是视图未加载并出现以下错误

控制台输出

错误错误：“找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables，例如数组。” 错误上下文对象{视图：{…}，nodeIndex：3，nodeDef：{…}，elDef：{…}，elView：{…}}

getGifs() {
this.getData().subscribe(data => {
  console.log(data);
  this.data = data;
})
}

在控制台日志中，我可以看到结果为

data: Array(25) [ {…}, {…}, {…}, … 
meta: Object { status: 200, msg: "OK", response_id:       "5cea7c49386968693259fc04" }
pagination: Object { total_count: 2447, count: 25, offset: 0 }
<prototype>: Object { … }

如何在HTML页面中读取此数据变量。尝试使用ngfor进行迭代，但失败。

Answer 1

您应该分配响应的data属性以在HTML上呈现

this.data = data.data;

并以HTML格式呈现

  <ul>
    <li *ngFor="let item of data">
       {{item.type}}. {{item.slug}}
    </li>
  </ul>

编辑

this.getData().subscribe((data:any) => {
  console.log(data);
  this.data = data.data;
})

在Angular中将json对象数据放入html前端

1 个答案: