Ich erhalte "Fehler: InvalidPipeArgument: '[Objekt Objekt]' für Pipe 'AsyncPipe'", wenn der folgende Code ausgeführt wird.FirebaseList - Zugriff auf Parsing-Daten, die von Firebase abgerufen wurden, nicht möglich

HTML-Vorlage:

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

Seite ts:

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

Feuerbasis Anbieter

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

Feuerbasis db

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

Von der Web App konnte ich Elemente zu Firebase db hinzufügen. Aber ich konnte die Daten nicht von Firebase rendern. Ich erhalte den oben genannten Fehler.

Vielen Dank im Voraus für Ihre Hilfe.

Quelle

2017-11-01 jegadeesh

dies viel wie https://stackoverflow.com/questions/47045479/integrating-firebase- aussieht with-ionic-3-and-angular .. –

@SurajRao ja, ich folge auch dem gleichen Tutorial. – jegadeesh

AngularFire2 V5

this.afd.list('/shoppingItems/') nicht eine asynchrone beobachtbaren zurückkehren, die angeblich mit async Rohr arbeiten. Es gibt einen Verweis auf die Liste in der Echtzeitdatenbank zurück. Sie müssen valueChanges() verwenden, um das zurückzugeben.

In Ihrem Provider geben die beobachtbaren,

getShoppingItems() { 

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

Wenn Sie durch $key/$value, Zugriff sind die upgrade details for angularfire2 v4 to 5 prüfen. Dies liegt daran, FirebaseList veraltet und AngularFireList wird nun ab Version 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()

Sie benötigen snapshotChanges()

getShoppingItems() { 

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

Um $key oder $value in den HTML-Zugriff, Gebrauch verwenden zurück item.payload.key und item.payload.val()

Quelle

2017-11-01 05:14:15

Dieser Rückgabewert sollte einer Variablen vom Typ Angularfirelist [] right? Zugeordnet werden, wie geht das in page ts vor? – jegadeesh

In Ihrem Beispiel verwenden Sie bereits 'async', sodass Sie Observable of List zuweisen können (was Sie bereits tun). Wenn Sie Daten möchten, müssen Sie in der Komponente –

abonnieren Danke für Ihre Hilfe mate! – jegadeesh

Hinzufügen Lebenszyklus in der home.ts Datei und statt Konstruktor laden Sie Ihre Artikel in ionViewDidLoad, ersetzen Sie Ihren Konstruktor mit folgenden Code

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

    } 

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

Quelle

2017-11-01 15:11:53

FirebaseList - Zugriff auf Parsing-Daten, die von Firebase abgerufen wurden, nicht möglich

Antwort

AngularFire2 V5

Verwandte Themen