当数据准备就绪时，解除Ionic 4加载(微调器)

Question

当数据准备好时，如何关闭我的简单Ionic 4加载程序(微调器(？必须有一个简单的方法来做到这一点，但不知何故，我找不到一个好的例子。

Spinner:

async runSpinner(loadingId: string) {
const loading = await this.loadingController.create({
id: loadingId,
message: 'Loading...'
});
await loading.present();
const { role, data } = await loading.onDidDismiss();
}

数据(加载时，微调器应停止(

this.someService
.getCustomizationResult(requestData)
.subscribe(data => {
// if (data) {
// ...
});

我试过设置布尔值，但没有成功。提前感谢！

Answer 1

您可以采用这种方法：

• 使用布尔值显示/隐藏加载微调器
• 使用ionViewWillEnter进入页面时，将微调器设置为活动
• 加载数据时，将微调器设置为false
• 当您的服务发送错误时，不要忘记隐藏微调器，否则微调器不会隐藏以显示错误消息

示例

<ion-content>
<ion-grid>
<ion-row *ngIf="spinner">
<ion-col size="12">
// You can customize this the way you want
<ion-spinner></ion-spinner>
</ion-col>
</ion-row>
<ion-row *ngIf="!spinner">
// When the data loads, show this ...
</ion-row>
</ion-grid>
</ion-content>

spinner: boolean;
ionViewWillEnter() {
this.spinner = true;
}
getCustomizationResult() {
this.someService
.getCustomizationResult()
.subscribe({
next: (data) => {
// data
this.spinner = false;
},
error: (error) => {
// error
this.spinner = false;
}
});
}

Answer 2

检查这个

const loading = await this.loadingController.create({
message: 'Loading...'
});
}
// start working 
loading.present().then( async ()=> {
/////Call your services to get data
}).then( async() => {
loading.dissmiss();
});