angular - framework - Ionic 2-El controlador de carga no funciona

validar campos con angular 2

Question

Estoy intentando usar LoadingController recientemente agregado de esta manera:

let loading=this.load.create({
content: "Connexion au serveur Migal en cours..."
});
loading.present();
this.http.get(this.urlCheckerForm.value.migalUrl+''/action/MobileApp/URLChecker'')
.map(res => res.json())
.subscribe(
data => this.newConnection(data,loading),
error => this.catchURLError(loading));
loading.dismiss();

Básicamente, solo quiero mostrar mi ventana emergente de carga antes de que se cargue la página y descartarla después.

Seguí el ejemplo en Ionic 2 Documentation , pero parece que no funciona en absoluto ...

EDITAR: El componente de carga ni siquiera aparece.

Answer 1

El problema con su código es que está haciendo la solicitud http y luego llamando a dismiss() pero el método dismiss() no espera a que termine la solicitud http. Por favor, eche un vistazo a este plunker .

El código es casi autoexplicativo:

import { NavController, LoadingController } from ''ionic-angular/index'';
import { Http, Response } from ''@angular/http'';
import { Component } from "@angular/core";
import ''rxjs/Rx'';
@Component({
templateUrl:"home.html"
})
export class HomePage {
private users : Array<any>
constructor(private http: Http, private loadingCtrl: LoadingController) {
// Create the popup
let loadingPopup = this.loadingCtrl.create({
content: ''Loading data...''
});
// Show the popup
loadingPopup.present();
// Get the data
this.http.get(''https://jsonplaceholder.typicode.com/users'')
.map((res: Response) => res.json())
.subscribe(
data => {
// I''ve added this timeout just to show the loading popup more time
setTimeout(() => {
this.users= data;
loadingPopup.dismiss();
}, 1000);
// Should be just this:
// this.users= data;
// loadingPopup.dismiss();
},
err => console.error(err)
);
}
}

Answer 2

Para la última versión de ionic, debe manejar el evento de descarte:

let loading = this.load.create({
content: "Connexion au serveur Migal en cours..."
});
loading.present();
loading.onDidDismiss().then(() => {
do thinks.....
});

Answer 3

Puede usar ion ionViewLoaded () para mostrar el Controlador de carga y luego descartarlo cuando se carga la vista y se obtiene el contenido de su Suscripción.

ionViewLoaded() {
let lr = this.loading.create({
content: ''Your Display Message...'',
});
lr.present().then(() => {
this.Yourservice.Yourfunction()
.subscribe(res => {
this.yourresult = res;
});
lr.dismiss();
});
}

También puede estructurar su código de esta manera para asegurarse de que la Suscripción esté completa antes de Descartar el cargador.

ionViewLoaded() {
let lr = this.loading.create({
content: ''Your Display Message...'',
});
lr.present().then(() => {
this.Yourservice.Yourfunction()
.subscribe(
data => this.yourresult = data,
error => console.log(error),
()=> lr.dismiss()
);
});
}

Answer 4

Puse "loading.dismiss ();" en suscribirse {} y funciona bien :)

 this.http.get(url)
.subscribe(data =>{
this.items=JSON.parse(data[''_body'']).results;
loading.dismiss();
},