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

你可以找到一个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