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

问题描述

运行以下代码时，我收到错误：InvalidPipeArgument：'[object Object]'管道'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 provider

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 db

firebase db

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

从Web应用程序中，我可以将项目添加到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 /'）不返回应该工作的异步observable使用 async 管道。它返回对实时数据库中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.

在你的提供者中返回observable，

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 已弃用，现在从版本5返回 AngularFireList 。

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
  }

访问 $ key 或html中的$ code> $ value ，
使用 item.payload.key 和项。 payload.val（）

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

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