Ionic 和 Firebase - InvalidPipeArgument:管道“AsyncPipe"的“[object Object]" [英] Ionic and Firebase - InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

问题描述

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

I am having issue getting a basic CRUD to-do list app using Ionic 3 and Firebase to work.

我遇到的错误信息是:

未捕获(承诺中):错误:InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

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

The error message started when I added the <ion-item *ngFor="let item of shoppingListRef$ | async"> section to 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> 之间的代码，这会删除错误消息.但是，无法弄清楚如何解决它.

I have tried commenting out the code between <ion-item> and </ion-item> in the file above, and that removes the error message. However, can't figure out how to fix it.

这里有一些相关的文件.

Here are some relevant files involved.

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

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

Thanks in advance for any ideas / help you may have!

推荐答案

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

I think you are using the new angularfire2 version which is version 5 in this case you should be doing the following:

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 不再返回可观察对象，因此您无法使用 async 管道在模板中订阅它.这就是为什么你应该链接 valueChanges() 在这种情况下返回 Observable 的方法.

as starting from version 5 database.list no longer returns an observable so you can't subscribe to it in the template using the async pipe. this is why you should chain the valueChanges() method which returns an Observable in this case.

这篇关于Ionic 和 Firebase - InvalidPipeArgument:管道“AsyncPipe"的“[object Object]"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！