Ionic2: Wie man Daten von Firebase Angularfire liest

Question

Ich entwickle einfache Todo ionic2 Anwendung, indem ich auf eine Schaltfläche klicke Ich möchte Daten in der Ansicht von Firebase URL anzeigen, wie kann ich das tun, wenn ich das mache ich ' Ich bekomme einen Fehler an der Browser-Konsole:

oder was ist der richtige Weg zum Lesen von Daten.

machen die Anfrage wie diese

this.http.request("https://taskionic.firebaseio.com/").subscribe((res) => { 
      console.log(res.json()) 
      this.post = res.json(); 
    }, (err) => { 
     console.log(err) 
    }) 

Answer 1

Sie müssen sowohl Firebase und Angularfire2 in Ihre SystemJS Konfiguration konfigurieren:

System.config({ 
    map: { 
    firebase: '/node_modules/firebase/lib/firebase-web.js', 
    angularfire2: ' node_modules/angularfire2' 
    }, 
    packages: {  
    angularfire2: { 
     main: 'angularfire2.js', 
     defaultExtension: 'js' 
    },app: { 
     format: 'register', 
     defaultExtension: 'js' 
    } 
    }, 
}); 

Dann können Sie konfigurieren entsprechenden Anbieter:

import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2'; 

@App({ 
    (...) 
    providers: [ 
    FIREBASE_PROVIDERS, 
    defaultFirebase('https://[YOUR-APP].firebaseio.com/') 
    ] 
}) 
export class MyApp { 
    (...) 
} 

und schließlich injizieren Sie die AngularFire Klasse:

export class SomePage { 
    items: Observable<any[]>; 

    constructor(af: AngularFire) { 
    this.items = af.list('/items'); 
    } 
} 

Answer 2

Siehe unten, wie lösen Problem mit REST API. Ich habe eine Antwort hier für die Lösung des Problems mit AngularFire-how to set up firebase with ionic 2/angular 2 and typescript

Dies ist der Ansatz, den ich verwenden, da Firebase ein Objekt und kein Array zurückgibt. I Schleife durch den Schnappschuss und ein Array erstellen, die aus dem Aufruf

Das Service

getDataObs(_id) { 
    var ref = this.baseRef.child('bookItems') 
    // ref = ref.child(_id) 
    var that = this 

    return new Observable(observer => { 
     ref.on('value', 
      (snapshot) => { 
       var arr = [] 

       snapshot.forEach(function(childSnapshot) { 
        arr.push({ 
         id: childSnapshot.key(), 
         data: childSnapshot.val() 
        }); 
       }); 
       observer.next(arr) 
      }, 
      (error) => { 
       console.log("ERROR:", error) 
       observer.error(error) 
      }); 
    }); 
} 

Die Komponente

this.FBService.getDataObs(data.uid) 
    .subscribe((data: Array<any>) => { 
     console.log(data) 
     this.items = data 
    }) 

Die HTML-Seite

<ion-navbar *navbar> 
    <ion-title> 
     Home 
    </ion-title> 
</ion-navbar> 

<ion-content class="home"> 
    <h3 padding>Active User: {{activeUser}}</h3> 
    <button (click)="doLogout()">Logout</button> 
    <ion-card *ngFor="#item of items"> 
     <ion-card-header> 
      {{item.data.volumeInfo.title}} 
     </ion-card-header> 
     <ion-card-content> 
      {{item.data.volumeInfo.description}} 
     </ion-card-content> 
    </ion-card> 
</ion-content> 

Komplettlösung hier zurückgegeben - https://github.com/aaronksaunders/ionic2-firebase-sample