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

Question

当运行以下代码时，我收到“错误：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>

页码：

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

firebase 提供商

  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 数据库

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

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

在此先感谢您的帮助。

Answer 1

AngularFire2 V5

this.afd.list('/shoppingItems/') 不是 return 应该与 async 管道一起使用的异步可观察对象。它 return 是对实时数据库中列表的引用。你需要用valueChanges()到return那个。

在您的提供者中 return observable，

 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 return 编辑的。

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

Answer 2

在 home.ts 文件中添加 ionViewDidLoad 生命周期，而不是将构造函数加载到 ionViewDidLoad 中，将构造函数替换为以下代码

    constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {

  }

  ionViewDidLoad() {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
    console.log(this.shoppingItems);
  }

Answer 3

导入时间为 page.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { AngularFireDatabase} from 'angularfire2/database';
 import { Observable } from "rxjs/Observable";
 import { ShoppingItem } from '../../model/shoppingitem';

从您的提供商那里以正确的方式导入您的提供商

 import { FirebaseProvider } from '../../providers/firebase/firebase';

 export class Page {

  shoppingItems:Observable<ShoppingItem[]>;

 constructor(public navCtrl: NavController, 
             public firebaseProvider: FirebaseProvider) {

                this.shoppingItems=this.firebaseProvider
                .getShoppingItem()
                .snapshotChanges()
                .map(
                  changes=>{
                    return changes.map(c=>({
                      key:c.payload.key, ...c.payload.val(),
                    }));
                  }
                );
          }
        }

     }

firebaseProvider

请注意 'shopping-list' 是 firebase 数据库中的 table

  private itemListRef = this.afDatabase.list<ShoppingItem>('shopping-list');

  constructor(private afDatabase: AngularFireDatabase) {}

 .getShoppingItem(){

   return this.itemListRef;

  }
 }

您的购物项目模型

 export interface ShoppingItem{
  key?:string;
  }

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

FirebaseList - Unable to access parse data fetched from firebase

ionic-framework

angularfire2

AngularFire2 V5