Ionic 和 Firebase - InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”
Posted
技术标签:
【中文标题】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/…请查收以上是关于Ionic 和 Firebase - InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”的主要内容,如果未能解决你的问题,请参考以下文章
Ionic 3 的 PWA 和 Firebase 云消息注册
使用 ionic 和 firebase 云消息点击通知后打开页面
Ionic 和 Firebase - InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”
使用 auth0 Firebase 和 Ionic 进行 Linkedin 身份验证