Angular 5 无法找到类型为“object"的不同支持对象“[object Object]".NgFor 只支持绑定到 Iterables，比如 Arrays

问题描述

我正在尝试从我的后端 api 返回产品并将其显示在我的前端页面上.当我执行 *ngFor 循环时，它给了我一个错误.这是我的代码.

i am trying to return products from my backend api and display it on my frontend page. When i execute the *ngFor loop it gives me an error. Here are my codes.

我的后端 API

data
   0
    name    "perferendis"
    totalPrice  323.76
    rating  5
    discount    43
  href
    link    "http://localhost:8000/api/products/1"
   1
     name   "non"
     totalPrice 92.34
     rating 3.5
     discount   19
   href
      link  "http://localhost:8000/api/products/2"
    2
     name   "a"
     totalPrice 246.76
     rating 3
     discount   38
  href
    "http://localhost:8000/api/products/3"
    3
     name   "vitae"
     totalPrice 537.57
     rating "No rating yet"
     discount   1
   href
     link   "http://localhost:8000/api/products/4"

  links
     first  "http://localhost:8000/api/products?page=1"
     last   "http://localhost:8000/api/products?page=3"
     prev   null
     next   "http://localhost:8000/api/products?page=2"
meta
   current_page 1
from    1
last_page   3
path    "http://localhost:8000/api/products"
per_page    20
to  20
total   60

我的服务

getProducts(): Observable<any> {
  return this.http.get('http://localhost:8000/api/products')
  .map(res => {
      return res;
  });

我的组件

products: Products[];

constructor(private productservice: ProductService) { }

  ngOnInit() {
  this.productservice.getProducts()
  .subscribe(res => this.products = res);
  }

}

当我在带有 products 属性的 html 文件中执行 for 循环时，它返回此错误.错误:找不到类型为‘object’的不同支持对象‘[object Object]’.NgFor 仅支持绑定到可迭代对象，例如数组."我需要纠正什么?以及如何正确显示产品对象?

when i do a for loop in my html file with the products property it returns this error. "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." What do i need to correct? And how do i get the products object properly displayed?

编辑

<li class="span4" *ngFor="let product of products">

这是我的 ngFor 循环.

that is my ngFor loop.

推荐答案

在您的服务中，您返回的对象只有一个属性 data，它仍然是一个对象，而不是一个数组.

In your service, you are returning an object with only one property data, which is still an object, not an array.

尝试返回res.data:

getProducts(): Observable<Products[]> {
  return this.http.get('http://localhost:8000/api/products')
  .map(res => {
      return res.data;
  })

这篇关于Angular 5 无法找到类型为“object"的不同支持对象“[object Object]".NgFor 只支持绑定到 Iterables，比如 Arrays的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！