离子2 - 加载控制器不起作用 [英] Ionic 2 - Loading Controller doesn't work

问题描述

我试图以这种方式使用最近添加的LoadingController：

I am trying to use the recently added LoadingController this way :

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();

基本上，我只想在加载页面之前显示加载pop-in，并将其关闭之后。

Basically, I just want to display my loading pop-in before my page is loaded, and dismiss it after.

我按照 Ionic 2文档，但它似乎根本不起作用...

I followed the example on Ionic 2 Documentation, but it doesn't seem to work at all...

编辑：加载组件甚至没有出现。

EDIT : The loading component doesn't even show up.

推荐答案

您的代码的问题在于您正在发出http请求然后调用 dismiss（），但 dismiss（）方法不等待http请求完成。请查看此plunker 。

The issue with your code is that you're making the http request and then calling the dismiss() but the dismiss() method does not wait for the http request to finish. Please take a look at this plunker.

代码几乎是不言自明的：

The code is pretty much self-explanatory:

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)
    );

  }
}

这篇关于离子2 - 加载控制器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！