Ionic 3在http请求上显示加载符号 [英] Ionic 3 show loading symbol on http request

问题描述

我正在学习Ionic，所以一旦单击注册"按钮，如何在ionic 3中获得响应后如何显示加载符号并隐藏它?

I am learning Ionic,so once the Signup button is clicked, How to show loading symbol and hide it after getting the reponse in ionic 3 ?

sign.html

sign.html

<button ion-button color="danger" block outline (click)="signup()">Signup</button>

signup.ts

signup.ts

signup() {
    this.authServiceProvider.postData(this.userData, "signup").then((result) => {
    this.responseData = result;
    console.log(this.responseData);
    if( (JSON.stringify(this.responseData._body)) != "" ) {
        this.navCtrl.setRoot(HomePage);
    } else {
        console.log("User already exists");
    }
    }, (err) => {
        //connection failed error message
        console.log("something went wrong");
    });
}

推荐答案

首先，您需要导入加载控制器.

First of all, you need to import loading controller.

import { LoadingController } from 'ionic-angular';

在构造器中，您需要为其创建一个对象.

in the constructor, you need to create an object of it. as

constructor(public loadingCtrl: LoadingController){}

现在，在以注册方法调用服务之前，您需要激活加载消息，然后将其关闭.

Now before calling the service in signup method, you need to activate loading message and after the result, dismiss it.

signup() {
 let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });
    loading.present();
    this.authServiceProvider.postData(this.userData, "signup").then((result) => {
    this.responseData = result;
    console.log(this.responseData);
    if( (JSON.stringify(this.responseData._body)) != "" ) {
     loading.dismiss();        
     this.navCtrl.setRoot(HomePage);
    } else {
        loading.dismiss();
        console.log("User already exists");
    }
    }, (err) => {
        //connection failed error message
        console.log("something went wrong");
    });
}

这篇关于Ionic 3在http请求上显示加载符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！