Ionic 2:找不到“object"类型的不同支持对象“[object Object]".NgFor 仅支持绑定到 Iterables,例如 Arrays [英] Ionic 2: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
问题描述
我正在尝试使用以下方法从我的服务类中的 firebase 检索数据:
I am trying to retrieve data from firebase in my service class using:
return this.http.get('https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json')
.map(res => res.json());
在 home.ts 中,然后我使用以下方式订阅它:
In home.ts, I then subscribe to it using:
this.productService.fetchProducts()
.subscribe(data => {
console.log(data)
this.products = data;
});
我输出到 home.html 使用:
I output to home.html using:
<ion-card ion-item *ngFor="let product of products; let i = index" (click)="onItemClick(product)">
<ion-card-header>
{{ product.date | date }}
</ion-card-header>
<ion-card-content>
<ion-card-title>
{{ product.title }}
</ion-card-title>
<p>
{{ product.content }}
</p>
</ion-card-content>
</ion-card>
但我不断收到错误
错误:找不到类型为object"的不同支持对象[object Object]".NgFor 只支持绑定到 Arrays 等 Iterables.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我尝试查看类似的问题,但无济于事.请帮忙.
I tried looking at similar issues but to no avail. Please help.
推荐答案
请检查您的 JSON.https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json它返回一个对象而不是数组.这就是为什么你不能在 ngFor 中使用返回的数据.
Please check your JSON. https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json It returns an Object not an Array. That is why you cannot use returned data in ngFor.
{
-KiTWPuI_TYt0b_Qi03Y: {
amount: 0,
category: "Baby",
content: "I love cricket",
date: "2017-03-01",
title: "Cricket"
},
-Kid7fghtlxkyrOChQPk: {
amount: "111",
category: "Book",
content: "updated content",
date: "2017-04-01",
title: "Cycling"
},
d9e7545c-90a3-4a57-97ab-ea3bf9171023: {
amount: "12",
category: "Baby",
content: "COnten1",
date: "2017-01-01",
title: "Title2"
}
}
试试这个:
<ion-card ion-item *ngFor="let key of keys; let i = index" (click)="onItemClick(key)">
<ion-card-header>
{{ products[key].date | date }}
</ion-card-header>
<ion-card-content>
<ion-card-title>
{{ products[key].title }}
</ion-card-title>
<p>
{{ products[key].content }}
</p>
</ion-card-content>
</ion-card>
在您的 component.ts 中:
In your component.ts:
keys: string[];
...
this.productService.fetchProducts()
.subscribe(data => {
console.log(data)
this.products = data;
this.keys = Object.keys(this.products);
});
并相应地修改您的 onItemClick().
And modify your onItemClick() accordingly.
这篇关于Ionic 2:找不到“object"类型的不同支持对象“[object Object]".NgFor 仅支持绑定到 Iterables,例如 Arrays的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!