Ionic和Firebase-InvalidPipeArgument:' [object Object]'用于管道' AsyncPipe' [英] 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:管道"AsyncPipe"的"[对象对象]"

当我将< ion-item * ngFor ="letter 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:' [object Object]'用于管道' AsyncPipe'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！