Wie man Karte anstelle von Abonnement in Angularfire2, Ionic 3 verwendet

Question

In meinem Projekt verwende ich Ionic 3 und AngularFire2. Ich muss den Wert von der Firebase-Datenbank abrufen und einige Änderungen vornehmen und in der HTML-Seite anzeigen, so dass ich auf den Abschluss des Abonnements warten muss. Hier ist mein Code:

items: FirebaseListObservable<any[]>; 

constructor(public navCtrl: NavController, public afDB: AngularFireDatabase) {} 

async ionViewDidEnter(){ 

    var a = await this.calldatabase(); 
    console.log(a);  // it display first and value is undefined 
    console.log('3');  // it display second 
} 

async calldatabase(){ 

    let category: any; 
    this.items = this.afDB.list('/cat', { preserveSnapshot: true }); 
    await this.items.subscribe(snapshots => { 
    snapshots.forEach(snapshot => { 
     console.log(snapshot.val());  // it displays third 
     category = snapshot.val(); 
    }); 
    }); 
    return category; 
} 

`

ich nicht warten Abonnement abzuschließen machen können, dann googeln ich es und dann fand diese Links

angularfire2 wait for subscription to end?

Angular 2 Wait for subscription to complete

How to wait for a AngularFire2 subscription to finish before running the next lines of code Angular2

Kann nicht aufgelöst werden. Jetzt versuchen Im Karte zu verwenden, anstatt Abonnement es nichts

import 'rxjs/add/operator/map'; 

async calldatabase(){ 

    let category: any; 
    this.items = this.afDB.list('/cat', { preserveSnapshot: true }); 
    await this.items.map(snapshots => { 
    console.log(snapshots);    // it displays nothing 

    snapshots.forEach(snapshot => { 
     console.log(snapshot.val());  // it displays nothing 
     category = snapshot.val(); 
    }); 
    }); 
    return category; 
} 

My Cat value in database

Answer 1

this.afDB.list('/cat', { preserveSnapshot: true }); 

Dies ist ein beobachtbares anzeigt, wo Sie Mail abonnieren können.

async calldatabase(){ 


    return this.afDB.list('/cat', { preserveSnapshot: true }); 

} 

Dann können Sie diese Aussage in der Komponente verwenden, wo Sie die Daten benötigen

showMyData(){ 

this.callDatabase.subscribe((data)=>{ 
//Do something with this data 
console.log(data)}); 

} 

Ich schlage vor, dass Sie einen Dienst für Firebase und ein Modell für die Katze verwenden. Das können Sie den folgenden Code verwenden:

showMyData(){ 

let theCats: Cats[]; 

this.callDatabase.subscribe((data)=>{ 
theCats = data; 
console.log(theCats)}); 

//Do something with theCats 
}