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

我认为您使用的是版本为5的新版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。

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

1 个答案: