Ошибки с загрузочным контроллером

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

Я изменил свой код для использования .finally, и, похоже, он работает правильно.Будучи новичком в angular / ionic, я надеюсь, что это лучшая практика и правильный способ сделать это.

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() {
  }

}

Answer 2

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, вторая - ошибка, а третья завершена. Я полагаю, что отсутствующая информация о том, что complete будет вызвана после того, как вы уже запустили this.loader.dismiss(), приведет к ошибке. Поскольку complete вызывается до тех пор, пока он реализован, а Observable не отменена.