FirebaseList: no se ha podido acceder a los datos de análisis recostackdos de firebase

Obtengo “Error: InvalidPipeArgument: ‘[object Object]’ para la tubería ‘AsyncPipe'” cuando se ejecuta el siguiente código.

plantilla html:

   {{ item.$value }}       

página ts:

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

proveedor de 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" 

Desde la aplicación web, pude agregar elementos a firebase db. Pero no pude procesar los datos de firebase. Estoy recibiendo el error mencionado anteriormente.

Gracias de antemano por tu ayuda.

AngularFire2 V5

this.afd.list('/shoppingItems/') no devuelve un observable asíncrono que se supone que funciona con una tubería async . Devuelve una referencia a la Lista en la base de datos en tiempo real. Necesita usar valueChanges() para devolver eso.

En su proveedor devuelva lo observable,

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

Si está accediendo a través de $key/$value , compruebe los detalles de la actualización de angularfire2 v4 a 5 . Esto es porque FirebaseList está en desuso y AngularFireList ahora se devuelve desde la versión 5.

Llamar a .valueChanges () devuelve un Observable sin ningún metadato. Si ya está persistiendo la clave como una propiedad, entonces está bien. Sin embargo, si confía en $ key, entonces necesita usar .snapshotChanges ()

Necesita usar snapshotChanges()

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

Para acceder a $key o $value en html, use item.payload.key y item.payload.val()

Agregue el ciclo de vida ionViewDidLoad en el archivo home.ts y en lugar de que el constructor cargue su elemento en ionViewDidLoad , reemplace su constructor con el código siguiente

  constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) { } ionViewDidLoad() { this.shoppingItems = this.firebaseProvider.getShoppingItems(); console.log(this.shoppingItems); } 

Importar en 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'; 

importe su proveedor de la manera correcta de su proveedor

  import { FirebaseProvider } from '../../providers/firebase/firebase'; export class Page { shoppingItems:Observable; 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

tenga en cuenta que la 'shopping-list' es la tabla en la base de datos de firebase

  private itemListRef = this.afDatabase.list('shopping-list'); constructor(private afDatabase: AngularFireDatabase) {} .getShoppingItem(){ return this.itemListRef; } } 

Su modelo de shoppingitem

  export interface ShoppingItem{ key?:string; } 
    Intereting Posts