Angularfire Firestore 加载时的离子微调器

Question

在一个 Ionic 项目中，我使用下面的代码通过 AngularFirestore 包装器从 Firestore 加载文档集合。

现在，当视图初始化时内容开始加载，我遇到了大约 4-8 秒的延迟，直到 firestore 获取的数据呈现在我的列表视图中，这对整体用户体验非常不利。

使用下面的代码，我可以在内容开始加载时显示加载微调器，我需要它来停止显示加载器。

我不知道如何触发该事件？任何帮助将不胜感激

非常感谢

    import { City } from './../../model/City';
    import { Component, AfterViewInit } from '@angular/core';
    import { NavController, IonicPage, LoadingController } from 'ionic-angular';
    import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
    import { Observable } from 'rxjs/Observable';

    @IonicPage()
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage implements AfterViewInit {
      citiesRef: AngularFirestoreCollection<City>
      cities: Observable<City[]>;

       loading = this.loadingCtrl.create({
        content: 'Loading Regions...'
      });

constructor(private loadingCtrl: LoadingController, private afs: AngularFirestore, public navCtrl: NavController) {

  }

  ngAfterViewInit(){
    this.loading.present().then(()=>{
      this.citiesRef = this.afs.collection<City>('regions', ref => ref.orderBy('name'));
      this.cities = this.citiesRef.valueChanges();
    })
  }
}

Answer 1

好吧，我所做的就是订阅 this.cities。它在我的情况下有效。这个想法是一旦它能够订阅它就会触发 loading.dismiss() 。希望有帮助

let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

    this.citiesRef=this.afs.collection('cities');
    this.cities=this.citiesRef.valueChanges();
    this.cities.subscribe(_=>{
      loading.dismiss();
    })