Comment utiliser la carte au lieu de l'abonnement dans Angularfire2, Ionic 3

Question

Dans mon projet, j'utilise Ionic 3 et AngularFire2. Je dois obtenir la valeur de la base de données Firebase et faire quelques changements et l'afficher dans la page HTML de sorte que je dois attendre la fin de l'abonnement. Voici mon 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; 
} 

`

Je ne peux pas faire attendre la souscription pour terminer, je googlé puis trouvé ces liens

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

Impossible de résoudre. Maintenant Im essayant d'utiliser la carte au lieu de l'abonnement n'affiche rien

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

Ceci est un Observable où vous pouvez vous abonner sur.

async calldatabase(){ 


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

} 

Ensuite, vous pouvez utiliser cette instruction dans le composant où vous avez besoin des données

showMyData(){ 

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

} 

Je vous suggère d'utiliser un service pour Firebase et un modèle pour le chat. Le vous pouvez utiliser le code suivant:

showMyData(){ 

let theCats: Cats[]; 

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

//Do something with theCats 
}