Question

我一直在关注由内容创建者Paul Halliday制作的Ionic教程。该项目是使用Firebase和Angular的购物清单。

我的问题是，每当我运行该应用程序时，都会收到如下错误：

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);
  }  

}

我们还通过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>

任何帮助将不胜感激。谢谢！！

在~~三个月后~~ 进行编辑我已经有一段时间没有访问这个问题了，但是为了避免误导那些寻求解决方案的人，是的，实际上支持异步管道。

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，基本上，该模板将订阅可观察的内容并转发返回的值。
一句话，如果您希望视图与数据保持同步，则可以不将此组件更改检测策略设置为onPush

错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables

1 个答案: