angular - Ionic和Firebase-InvalidPipeArgument : '[object Object]' for pipe 'AsyncPipe'

我在使用Ionic 3和Firebase正常工作时无法获取基本的CRUD待办事项列表应用程序时遇到问题。

我遇到的错误消息是:

未捕获( promise ):错误:InvalidPipeArgument:管道“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;
}

预先感谢您的任何想法/帮助!

最佳答案

我认为您正在使用新的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。

关于angular - Ionic和Firebase-InvalidPipeArgument : '[object Object]' for pipe 'AsyncPipe' ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46611944/