如何在数据准备好后关闭 Loader

Question

在我的 Ionic 2 应用程序中，我有一个使用服务的组件，该服务使用 http GET 来获取一些数据。然后我的组件调用此服务，当数据可用时，它会设置并显示它。

貌似如下:

export class FarmList implements OnInit {

  items: Object;


  constructor(public testService: TestService, public nav: NavController){
  }

  ngOnInit(){

    this.getData()
  }

  getData(){

    let loading = Loading.create({
      content: 'Please wait..',
      spinner: 'crescent'
    })

    this.nav.present(loading)

    this.testService.fetchData().then(data => this.items = data)

  }
...

}

虽然我的组件异步获取数据，但我正在尝试 loader 旋转，一旦数据可用，我希望 loader 消失。

但是，使用我当前的代码，即使在数据可用并显示后，微调器仍会继续旋转，如屏幕截图所示：

getData()是调用服务的方法。 我该如何解决这个问题？ loader的实现方式是否正确？

Answer 1

你可以找到一个working plunker here。

就像您在那个 plunker 的代码中看到的那样，我会做一些更改以使您的代码正常工作：

  export class FarmList implements OnInit {

  items: Object;

  // Define the loading var here, so we can access later when the information is ready
  loading : any;

  constructor(public testService: TestService, public nav: NavController){
  }

  // Instead of 'ngOnInit', I would use 'ionViewWillEnter'
  ionViewWillEnter(){
    this.getData()
  }

  getData(){

    this.loading = Loading.create({
      content: 'Please wait..',
      spinner: 'crescent'
    })

    this.nav.present(this.loading)

    this.testService.fetchData().then(data => { 
                                       this.items = data;

                                       // After we get the data, we hide the loading
                                       this.hideLoading()});

  }

  // I 've added this method so we can grab the loading var and use it 
  // to hide the loading component.
  private hideLoading(){
    this.loading.dismiss();
  }
...

}

==================================

更新：

截至 Ionic 2.0.0-beta.8 发布 (2016-06-06) changelog:

onPageWillEnter 已重命名为 ionViewWillEnter

Answer 2

以下代码对我有用：

  async someFunction() {

    const loader = await this.loading.create({
      message: 'Loading...',
    });

    loader.present().then(() => {               // show loader
      this._someService.getData().subscribe(result => {

      },
        error => {
          console.log(error);
        });

      loader.dismiss();                         // dismiss loader
    });
  }

Answer 3

ionic 4 - 如何实现加载功能：

import { LoadingController } from '@ionic/angular';

private timeoutTime = 10000;

async showLoading(){
        let loading = await this.loadingController.create({
            message: "Loading...",
            spinner: "bubbles"
        });
        loading.present();

        setTimeout(() => {
            loading.dismiss();  
        }, this.timeoutTime);
}

fetchProducts(){
        this.showLoading();

        this.productService.getProductsList().subscribe(res => {
            this.timeoutTime = 600; //dismiss loading bar after given seconds

            this.productsList = res['data'];

        });
}

我已经在我的 2-3 个项目中实施过。有用。顺便说一句，在这种情况下，我不需要在每个函数中都写下面的代码，

let loading = await this.loadingController.create({
            message: "Loading...",
            spinner: "bubbles"
        });
loading.present();

只要打电话

this.showloading()

函数执行前调用

this.timeoutTime = 600;

执行完成时

如何在数据准备好后关闭 Loader

How to dismiss Loader after data is ready

angular

typescript

ionic-framework

ionic2

ionic3