FirebaseList - 无法访问从 Firebase 获取的解析数据 [英] FirebaseList - Unable to access parse data fetched from firebase

查看:22
本文介绍了FirebaseList - 无法访问从 Firebase 获取的解析数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在运行以下代码时收到错误:InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'".

I'm getting " Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' " when running the following code.

html 模板:

 <ion-list>
    <ion-item-sliding *ngFor="let item of shoppingItems | async">
      <ion-item>
        {{ item.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

页面 ts:

shoppingItems: AngularFireList<any>;
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
}

firebase 提供程序

firebase provider

  constructor(public afd: AngularFireDatabase) {
    console.log('Hello FirebaseProvider Provider');
    console.log("Shopping items"+afd.list('/shoppingItems/'))
  }

  getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/');
  }
  addItem(name) {
    this.afd.list('/shoppingItems/').push(name);
  }

firebase 数据库

firebase db

shoppingItems
 -KxmiUt64GJsPT84LQsI: "qwerty"
 -KxmifqyfD41tRPwFh07: "key"

从网络应用程序中,我能够将项目添加到 firebase db.但我无法从 firebase 渲染数据.我收到上述错误.

From the web app I was able to add items to firebase db. But I wasn't able to render the data from firebase. I am getting the above mentioned error.

预先感谢您的帮助.

推荐答案

AngularFire2 V5

this.afd.list('/shoppingItems/') 不返回应该与 async 管道一起使用的异步 observable.它返回对实时数据库中 List 的引用.您需要使用 valueChanges() 来返回那个.

AngularFire2 V5

this.afd.list('/shoppingItems/') does not return an asynchronous observable which is supposed to work with async pipe. It returns a reference to the List in the real-time database. You need to use valueChanges() to return that.

在您的提供者中返回可观察的,

In your provider return the observable,

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').valueChanges();//here
  }

如果您通过 $key/$value 访问,检查 angularfire2 v4 到 5 的升级细节.这是因为 FirebaseList 已被弃用,AngularFireList 现在从版本 5 返回.

If you are accessing through $key/$value, Check the upgrade details for angularfire2 v4 to 5. This is because FirebaseList is deprecated and AngularFireList is now returned from version 5.

调用 .valueChanges() 返回一个没有任何元数据的 Observable.如果您已经将密钥作为属性持久化,那么您就可以了.但是,如果您依赖于 $key,则需要使用 .snapshotChanges()

Calling .valueChanges() returns an Observable without any metadata. If you are already persisting the key as a property then you are fine. However, if you are relying on $key, then you need to use .snapshotChanges()

你需要使用snapshotChanges()

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').snapshotChanges();//here
  }

要在 html 中访问 $key$value,使用 item.payload.keyitem.payload.val()

To access $key or $value in html, use item.payload.key and item.payload.val()

这篇关于FirebaseList - 无法访问从 Firebase 获取的解析数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆