文章/答案/技术大牛

发布

社区首页 >问答首页 >Angularfire Firestore正在加载时的离子旋转器

问Angularfire Firestore正在加载时的离子旋转器
EN

Stack Overflow用户

提问于 2017-11-22 17:58:13

回答 1查看 902关注 0票数 0

在一个离子项目中，我使用下面的代码通过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();
    })
  }
}

angularfire

google-cloud-firestore

ionic-framework

回答 1

Stack Overflow用户

发布于 2018-03-28 02:07:17

我所做的就是订阅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();
    })

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47431589

复制

相似问题

问Angularfire Firestore正在加载时的离子旋转器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularfire Firestore正在加载时的离子旋转器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularfire Firestore正在加载时的离子旋转器
EN