Loading Controller使用报错求助：TypeError: _this.loader.Dismiss is not a function

嘿，我一眼就看到问题所在了，这个报错的核心原因其实是拼写错误，不过我也顺带给你几个LoadingController的使用优化建议，帮你避免后续踩坑。

1. 直接修复拼写错误 #

你代码里多处把dismiss（正确写法）拼写成了dimiss（少了一个字母s），这就是触发_this.loader.Dismiss is not a function的根本原因。比如这些地方：

• error => { this.loader.dimiss();
• this.loader.dimiss();
• this.loader.dimiss();
• this.loader.dimiss(), this.getTasks()

把所有的dimiss替换成正确的dismiss，这个报错就能直接解决。

2. LoadingController使用的优化建议 #

除了拼写问题，还有几个小细节可以优化，避免后续出现“loader已关闭却重复调用dismiss”的新错误：

（1）用finalize统一处理loader关闭

你的getTasks方法里，success、error、complete回调都调用了this.loader.dismiss()，这会导致loader被多次关闭，容易引发新报错。可以用RxJS的finalize操作符，无论请求成功还是失败，只执行一次关闭逻辑：

// 先导入finalize
import { finalize } from 'rxjs/operators';

// 修改后的getTasks方法
getTasks() {
  this.createLoader();
  this.loader.present();
  this.sanitationService.getSanitationTasks(this.DatabaseName)
    .pipe(
      finalize(() => {
        // 先检查loader是否存在，避免重复关闭报错
        if (this.loader) {
          this.loader.dismiss().catch(err => console.log('Loader已被关闭'));
          this.loader = null; // 清空引用，防止后续误操作
        }
      })
    )
    .subscribe(
      data => { this.sanitationTasks = data }, // 成功回调只处理数据
      error => {
        let alert = this.alertCtrl.create({
          subTitle: 'No Tasks Found',
          buttons: ['Dismiss']
        })
        alert.present();
        this.sanitationTasks = [];
      }
    );
}

（2）修复completeTask方法里的拼写和重复调用

同样用finalize优化你的completeTask方法，同时修正拼写：

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)
            .pipe(
              finalize(() => {
                if (this.loader) {
                  this.loader.dismiss().catch(err => console.log('Loader已被关闭'));
                  this.loader = null;
                }
              })
            )
            .subscribe(
              () => this.getTasks(),
              () => this.getTasks()
            );
        }
      }
    ]
  });
  alert.present();
};

总结 #

先把所有拼写错误修正，再用finalize统一管理loader的关闭逻辑，同时加入状态检查，这样不仅能解决当前的报错，还能让你的加载逻辑更健壮，避免后续出现不必要的问题。

内容的提问来源于stack exchange，提问作者Joe Starnes