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()是进行服务调用的方法。 我该如何解决这个问题？这是实现加载器的正确方法吗？

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

3 个答案: