Ionic3 get firebase data too slow to list it - firebase

Question

constructor(public navCtrl: NavController,public navParams : NavParams,
public modalCtrl:ModalController, private afAuth:AngularFireAuth, private afDatabase:AngularFireDatabase , public fb:FirebaseService) {
this.getDefaults();
this.selectedExercise=[];
console.log("home");
this.exercises=this.fb.getShoppingItems();
console.log(this.exercises);
at home.ts file,
at constructor, I get firebase data from firebase provider that I made to show it on list on html.
but the problem is that I logged it console.log(this.exercises) which is the data that I want to show on list, but it came null.
but after logged null, firebase provider get data from firebase and logged it
as you can see below.
I think browser should wait until firebase provider get data then should list it.
but don't know how to do it.

Answer 1

This is the way you should go
You need to change your getShoppingItems method to return a promise object like this
getShoppingItems(){
return new Promise<any>((resolve, reject) => {
this.db.list("/profile/user_id").subscribe(result =>{
resolve(result));
}
});
}
Your constructor method should get the result like this
constructor(
public navCtrl: NavController,
public navParams : NavParams,
public modalCtrl:ModalController,
private afAuth:AngularFireAuth,
private afDatabase:AngularFireDatabase ,
public fb:FirebaseService) {
this.getDefaults();
this.selectedExercise=[];
console.log("home");
//get your result like this
this.fb.getShoppingItems().then(result =>{
this.exercises = result;
console.log(this.exercises);
});
}

Answer 2

use the async pipe:
*ngFor="let item of exercises | async"
with
exercises = this.afd.list('...');