数据准备好后关闭 Ionic 4 加载（微调器）答案

【问题标题】：Dismiss Ionic 4 loading (spinner) when the data is ready数据准备好后关闭 Ionic 4 加载（微调器）
【发布时间】：2020-04-03 20:35:30
【问题描述】：

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

微调器：

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) {
    // ...
});

我尝试通过设置布尔值来做到这一点，但没有奏效。提前致谢！

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

检查这个

const loading = await this.loadingController.create({
message: 'Loading...'
});

}
// start working 
Loading.present().then( async ()=> {

 /////Call your services to get data

}).then( async() => {
loading.dissmiss();

});

【讨论】：

嗯，不幸的是，这不能正常工作......这是 Ionic 3 的解决方案吗？也许有一种方法可以设置一个布尔值，它会关闭微调器？

【解决方案2】：

您可以采用这种方法：

使用布尔值显示/隐藏加载微调器
当您进入带有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;
      }
  });
}

【讨论】：