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

Posted 2023-03-13

【中文标题】Ionic 和 Firebase - InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

【英文标题】：Ionic and Firebase - InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

【发布时间】：2018-03-18 15:02:02

【问题描述】：

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

我遇到的错误信息是：

未捕获（承诺中）：错误：InvalidPipeArgument: '[object Object]' for pipe '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;

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

【问题讨论】：

您使用的是哪个版本的 angularfire？

我正在使用 angularfire2 - 你可以在 import AngularFireDatabase, FirebaseListObservable from 'angularfire2/database';@HamedBaatour 的 shopping-list.ts 中看到

【参考方案1】：

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

【讨论】：

这行得通，但我没有进行上述所有更改，而是简单地进行了一项更改以链接valueChanges();方法。谢谢！

@Adam 太棒了！很高兴这对您有所帮助。我一开始就问你angularfire2 的版本，但我不得不猜测来帮助你；）

是的，我看到了——我没有意识到 angularfire2 有不同的版本，但现在我知道下次。谢谢！

@HamedBaatour valueChanges() 方法有效，但我没有得到 $key，这是我们可以观察到的。

***.com/questions/48515158/…请查收