Ionic3获取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);

在home.ts文件中， 在构造函数中，我从firebase提供程序获取firebase数据，我将其显示在html列表中。 但问题是我记录了它的console.log（this.exercises），这是我要在列表中显示的数据，但它是空的。 但是在记录为null之后，firebase提供程序从firebase获取数据并将其记录下来 你可以在下面看到。

我认为浏览器应该等到firebase提供商获取数据然后应该列出它。 但不知道该怎么做。

Answer 1

这是你应该去的方式

  

您需要更改getShoppingItems方法以返回此类承诺对象

getShoppingItems(){
 return new Promise<any>((resolve, reject) => {
            this.db.list("/profile/user_id").subscribe(result =>{
               resolve(result));
            } 
        });
}

  

你的构造函数方法应该得到像这样的结果

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

使用异步管道：

*ngFor="let item of exercises | async"

与

exercises = this.afd.list('...');