ionic-framework - FirebaseList - 无法访问从 firebase 获取的解析数据

Question

运行以下代码时出现“Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'”。

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();
}

火力地堡供应商

  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);
  }

火力数据库

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

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

预先感谢您的帮助。

Answer 1

AngularFire2 V5

this.afd.list('/shoppingItems/') 不返回异步可观察对象，它应该与 async 管道一起使用。它返回对实时数据库中列表的引用。您需要使用 valueChanges() 来返回它。

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

 getShoppingItems() {

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

如果您通过$key/$value访问，检查upgrade details for angularfire2 v4 to 5 .这是因为 FirebaseList 已弃用，AngularFireList 现在从版本 5 返回。

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.key 和 item.payload.val()