作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我一直在关注内容创建者 Paul Halliday 制作的 Ionic 教程。该项目是一个使用 Firebase 和 Angular 的购物 list 。
我的问题是,每当我运行该应用程序时,都会收到如下所示的错误:
Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我已尝试查看其他示例以了解如何修复我的代码,但它们似乎都不符合我的代码。
目前,我页面的 Ts 文件名为 shopping.ts
import { Component } from '@angular/core';
import { NavParams, NavController } from 'ionic-angular';
import { AddShoppingPage } from '../addshopping/addshopping';
import { AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { ShoppingItem } from 'src/models/shopping-item/shopping-item.interface';
@Component({
selector: 'page-shopping',
templateUrl: 'shopping.html'
})
export class ShoppingPage {
shoppingListRef$: Observable<ShoppingItem[]>;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private database: AngularFireDatabase
) {
this.shoppingListRef$ = this.database.list('shopping-list').valueChanges();
}
navigate2AddShoppingPg() {
this.navCtrl.push(AddShoppingPage);
}
}
还有一个接口(interface)是我们通过ts文件定义的:
export interface ShoppingItem {
itemName: string;
itemNumber: number;
}
最后,我们购物页面的html是:
<ion-header>
<ion-navbar>
<ion-title>Shopping List</ion-title>
<ion-buttons end>
<button (click)="navigate2AddShoppingPg()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor = "let item of shoppingListRef$">
<h2>Item Name: {{item.itemName}}</h2>
<h3>Quantity: {{item.itemNumber}}</h3>
</ion-item>
</ion-list>
</ion-content>
如有任何帮助,我们将不胜感激。谢谢!!
编辑 2 ~~三个月后~~我有一段时间没有访问过这个问题,但是为了避免误导那些寻求解决方案的人,是的,实际上支持异步管道。
最佳答案
你的 shoppingListRef$
不代表 Angular 的任何可迭代类型。这是Observable<ShoppingItem[]>
,而 Observable
本身是统一的。您要做的是迭代从可观察对象返回的值。尝试如下所示:
/* controller field */
listItems: ShoppingItem[] = [];
this.database.list('shopping-list').valueChanges()
.subscribe((v: ShoppingItem[]) => {
this.listItems = v.slice(0);
})
在模板中:
<ion-item *ngFor = "let item of listItems">
<h2>Item Name: {{item.itemName}}</h2>
<h3>Quantity: {{item.itemNumber}}</h3>
</ion-item>
如@user184994 所述,您也可以使用 async
在模板上,基本上在幕后将订阅可观察的并传递返回值。
需要注意的是,如果您希望 View 与数据保持同步,则可以不将此组件更改检测策略设置为 onPush
关于javascript - 错误 : Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor 只支持绑定(bind)到 Iterables,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51490945/
我是一名优秀的程序员,十分优秀!