javascript - 错误 : Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor 只支持绑定(bind)到 Iterables

Question

我一直在关注内容创建者 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 ~~三个月后~~ 我有一段时间没有访问过这个问题，但是为了避免误导那些寻求解决方案的人，是的，实际上支持异步管道。

Answer 1

你的 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