加载控制器时出错

Question

我试图找出使用加载控制器的最佳方法/做法。

我希望在发出HTTP请求时显示加载屏幕。然后尝试在成功/错误/完成时解雇它。我在下面尝试了这段代码但是出现了以下错误：

TypeError：_this.loader.Dismiss不是函数

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SanitationServiceProvider } from '../../providers/sanitation-service/sanitation-service'
import { AlertController } from 'ionic-angular';

import { LoadingController } from 'ionic-angular';


/**
 * Generated class for the SanitationPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-sanitation',
  templateUrl: 'sanitation.html',
})
export class SanitationPage {

  DatabaseName: string;
  sanitationTasks: any[];
  completeTaskURL: string;
  employeeNumber: string;
  loader: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private sanitationService: SanitationServiceProvider, private alertCtrl: AlertController, public loadingController: LoadingController) {

    this.DatabaseName = localStorage.getItem("DatabaseName");
    console.log("calling getTASKS");
    this.getTasks();

  }

  createLoader() {
    this.loader = this.loadingController.create({
      spinner: 'bubbles',
    });
  }

  getTasks() {
    this.createLoader();
    this.loader.present();

    this.sanitationService.getSanitationTasks(this.DatabaseName)
      .subscribe(
        data => { this.sanitationTasks = data, this.loader.dismiss() }, // success path
        error => {
          this.loader.dimiss();
          let alert = this.alertCtrl.create({
            subTitle: 'No Tasks Found',
            buttons: ['Dismiss']
          })

          alert.present();
          this.sanitationTasks = [];

        }, () => {this.loader.dismiss()
        }
      );
  }

  completeTask(LoadNumber) {


    let alert = this.alertCtrl.create({
      title: 'Complete Sanitation Task',
      message: 'Is the Trailer Finished?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Ok',
          handler: () => {
            this.createLoader();
            this.loader.present();

            this.employeeNumber =
              localStorage.getItem("EmployeeNumber");

            this.sanitationService.postSanitationTask(LoadNumber, this.employeeNumber, this.DatabaseName).subscribe(data => { this.loader.dimiss(); }, error => {

              this.loader.dimiss();
              this.getTasks();

            }, () => { this.loader.dimiss(), this.getTasks() })
          }
        }
      ]
    });
    alert.present();
  };

  refresh() {
    this.navCtrl.setRoot(SanitationPage);
  }
  ionViewDidLoad() {
  }

}

Answer 1

let loaded = this.loadingCtrl.create({ content: 'Sending code...' }); loaded.present(); let headers = new HttpHeaders(); headers = headers.set('Content-Type', 'application/json; charset=utf-8'); this.http.post(this.api.url + 'phoneVerification', data, { headers: headers }) .subscribe((response) => { loaded.dismiss(); }, (err) => { if (loaded != null) { loaded.dismiss(); } } );

在与订阅者打交道时，这似乎对我有用。只需将解雇电话置于错误和成功之中。

第一个回调函数是next / success，第二个是错误，第三个是完成。我相信这里缺少的信息是，在您运行this.loader.dismiss()之后将调用complete并导致错误。由于完成被调用，只要它被实现并且Observable没有被取消。

Answer 2

我将代码更改为使用.finally并且它似乎正常工作。对角度/离子是新手，我希望这是最好的做法，也是一种有效的方法。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SanitationServiceProvider } from '../../providers/sanitation-service/sanitation-service'
import { AlertController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/finally';

@IonicPage()
@Component({
  selector: 'page-sanitation',
  templateUrl: 'sanitation.html',
})
export class SanitationPage {

  DatabaseName: string;
  sanitationTasks: any[];
  completeTaskURL: string;
  employeeNumber: string;
  loader: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private sanitationService: SanitationServiceProvider, private alertCtrl: AlertController, public loadingController: LoadingController) {

    this.DatabaseName = localStorage.getItem("DatabaseName");
    console.log("calling getTASKS");
    this.getTasks();

  }

  createLoader() {
    this.loader = this.loadingController.create({
      spinner: 'bubbles',
    });
  }

  getTasks() {
    this.createLoader();
    this.loader.present();

    this.sanitationService.getSanitationTasks(this.DatabaseName)
      .finally(() => { console.log("first dismiss"), this.loader.dismiss() })
      .subscribe(
        data => { this.sanitationTasks = data }, // success path
        error => {

          let alert = this.alertCtrl.create({
            subTitle: 'No Tasks Found',
            buttons: ['Dismiss']
          })

          alert.present();
          this.sanitationTasks = [];

        }
      )

  }

  completeTask(LoadNumber) {


    let alert = this.alertCtrl.create({
      title: 'Complete Sanitation Task',
      message: 'Is the Trailer Finished?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Ok',
          handler: () => {
            this.createLoader();
            this.loader.present();

            this.employeeNumber =
              localStorage.getItem("EmployeeNumber");

            this.sanitationService.postSanitationTask(LoadNumber, this.employeeNumber, this.DatabaseName)
              .finally(() => console.log(this.loader.dismiss(), console.log("second dismiss"), this.getTasks()))
              .subscribe(data => { }, error => {

              })
          }
        }
      ]
    });
    alert.present();
  };

  refresh() {
    this.navCtrl.setRoot(SanitationPage);
  }
  ionViewDidLoad() {
  }

}