Angular 5并没有找到类型为'object'的另一个支持对象'[object Object]'. NgFor仅支持绑定到数组等Iterables [英] Angular 5 annot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as 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仅支持绑定到Iterables，例如数组."我需要纠正什么?以及如何正确显示产品对象?

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！