时间戳

首页 > 解决方案 > 加载控制器错误

angular - 加载控制器错误

问题描述

我正在尝试找出使用加载控制器的最佳方法/实践。

我想在发出 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() {
  }

}

标签： angularionic-frameworkionic3

解决方案

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，第二个是error，第三个是complete。我相信这里缺少的信息是在你已经跑完之后会调用 completethis.loader.dismiss()并且会导致错误。因为只要它被实现并且 Observable 没有被取消，就会调用 complete。

推荐阅读