Ionic3 слишком медленно получает данные Firebase, чтобы перечислить их

 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), который является данными, которые я хочу показать в списке, но он оказался нулевым. но после регистрации нулевого значения провайдер firebase получает данные из firebase и регистрирует их, как вы можете видеть ниже.

Я думаю, что браузер должен дождаться, пока провайдер firebase получит данные, а затем перечислить их. но не знаю, как это сделать.

Home.ts(справа)&& провайдер firebase(слева) Возвращаемое значение поставщика базы данных данных журнала должно быть в неопределенной позиции для его отображения

вот как я отображаю в html данные от провайдера firebase


firebase ionic3 angularfire
person Pd.Jung    schedule 10.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это путь, которым вы должны идти

Вам нужно изменить свой метод 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);
    });

}
person Emeka Obianom    schedule 10.07.2017

arrow_upward
0
arrow_downward

используйте асинхронный канал:

*ngFor="let item of exercises | async"

с

exercises = this.afd.list('...');
person ZehnVon12    schedule 10.07.2017