Ionic和Firebase - InvalidPipeArgument:管道'AsyncPipe'的'[object Object]'

Question

我在使用Ionic 3和Firebase工作时遇到基本的CRUD待办事项列表应用程序时遇到问题.

我坚持的错误信息是:

未捕获(承诺):错误:InvalidPipeArgument:管道'AsyncPipe'的'[object Object]'

我将该<ion-item *ngFor="let item of shoppingListRef$ | async">部分添加到shopping-list.html 时启动了错误消息:

购物-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>上述文件中,和去除该错误消息.但是,无法弄清楚如何解决它.

以下是涉及的一些相关文件.

购物,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)
  }
}

购物,item.interface.ts

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

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

Answer 1

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

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 的方法.