angular - 数据准备好后如何关闭 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()是进行服务调用的方法。 我怎样才能解决这个问题？这是实现加载器的正确方法吗？

Answer 1

你可以在这里找到一个工作的 plunker。

就像您在该 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)更新日志发布：

onPageWillEnter改名为ionViewWillEnter

Answer 2

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; 

在执行完成时

Answer 3

以下代码对我有用：

  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
    });
  }