In my Ionic 2
app 中,我有一个使用服务的组件,该服务使用 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()
是进行服务调用的方法。我怎样才能解决这个问题?这是实现加载程序的正确方法吗?
你可以找到一个在这里工作的笨蛋 http://plnkr.co/edit/R6UQvxyPghOlLK3rKRWb?p=preview.
就像您在该骗子的代码中看到的那样,我会进行一些更改以使您的代码正常工作:
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();
}
...
}
=================================
UPDATE:
截至 Ionic 2.0.0-beta.8 发布(2016-06-06)变更日志 https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-beta8-2016-06-06:
onPageWillEnter
被重命名为ionViewWillEnter
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)