Question

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

现在，当视图初始化时，内容开始加载，我会遇到大约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

嗯，我做的是我订阅了这个.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();
    })

当Angularfire Firestore正在加载时，离子微调器

1 个答案: