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>

页面ts：

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 db。但我无法从 firebase 渲染数据。我收到上述错误。

提前感谢您的帮助。

Answer 1

AngularFire2 V5

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

在你的提供者中返回 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 返回。

调用 .valueChanges() 返回一个没有任何元数据的 Observable。如果您已经将密钥作为属性保留，那么您就可以了。但是，如果你依赖 $key，那么你需要使用 .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 数据库中的表

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

  constructor(private afDatabase: AngularFireDatabase) {}

 .getShoppingItem(){

   return this.itemListRef;

  }
 }

您的购物项目模型

 export interface ShoppingItem{
  key?:string;
  }