AngularFire2 V5

Question

运行以下代码时，我收到管道'AsyncPipe'的错误：InvalidPipeArgument：'[object Object]'。

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 db

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

从网络应用程序中，我可以将项目添加到firebase db。但是我无法从firebase渲染数据。我收到了上面提到的错误。

提前感谢您的帮助。

Answer 1

AngularFire2 V5

this.afd.list('/shoppingItems/')不返回应该与async管道一起使用的异步observable。它返回对实时数据库中List的引用。您需要使用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已弃用，现在从版本5返回AngularFireList。

调用.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

在ionViewDidLoad文件中添加home.ts生命周期，而不是构造函数在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;
  }

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

3 个答案:

AngularFire2 V5