Ionic 和 Firebase - InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

Question

我在使用 Ionic 3 和 Firebase 获取基本 CRUD 待办事项列表应用时遇到问题。

我遇到的错误信息是：

未捕获（承诺中）：错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

当我将 <ion-item *ngFor="let item of shoppingListRef$ | async"> 部分添加到 shopping-list.html 时开始出现错误消息：

shopping-list.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Shopping List</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="navigateToAddShoppingPage()">
        <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$ | async">
      <h2>Item Name: {{item.itemName}}</h2>
      <h3>Amount: {{item.itemNumber}}</h3>
    </ion-item>
  </ion-list>
</ion-content>

我已经尝试在上面的文件中注释掉<ion-item> 和</ion-item> 之间的代码，这会删除错误消息。但是，无法弄清楚如何解决它。

这里有一些相关的文件。

shopping-list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

import { AddShoppingPage } from '../add-shopping/add-shopping';
import { ShoppingItem } from '../../models/shopping-item/shopping-item.interface';

@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})
export class ShoppingListPage {

  shoppingListRef$: FirebaseListObservable<ShoppingItem[]>

  constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) {
    this.shoppingListRef$ = this.database.list('shopping-list');
  }

  navigateToAddShoppingPage() {
    this.navCtrl.push(AddShoppingPage)
  }
}

shopping-item.interface.ts

export interface ShoppingItem {
    itemName: string;
    itemNumber: number;
}

提前感谢您提供的任何想法/帮助！

Answer 1

我认为您正在使用新的 angularfire2 版本，即版本 5，在这种情况下，您应该执行以下操作：

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})
export class ShoppingListPage {
 shoppingListRef$: Observable<any[]>;
  constructor(database: AngularFireDatabase) {
    this.shoppingListRef$ = this.database.list('shopping-list').valueChanges();;
  }
}

从版本 5 开始，database.list 不再返回 observable，因此您无法使用 async 管道在模板中订阅它。这就是为什么你应该链接 valueChanges() 在这种情况下返回 Observable 的方法。