angular - 为什么 LoadingController 在 API 调用期间尝试关闭它时抛出 'Overlay does not exist '

Question

我使用以下方法为自定义加载 Controller 创建了一个服务:

    async showLoader(){
        //Show cutom loader
        this.loadingController.create({
          message: 'Loading...',
          cssClass: 'loader-css-class'
        }).then((res) => {
          return res.present();
        });
      }
     
      async dismissLoader(){
        //Hide cutome loder
        this.loadingController.dismiss().then((response) =>{
          console.log("Loader closed: ", response);
        }).catch((err) => {
          console.log('Errro occured closing loader: ' + err);
        });
     }

在发出 API 请求之前使用服务并调用负载 Controller ，并在 API 调用返回数据时关闭:

    constructor(
       public loadingController : LoadControllerServiceService){}

API 调用是从 ngOnInIt 进行的:

ngOnInit(){

    this.getData();
   
 }

此方法进行 API 调用:

    getData(){
       //get data form remote serve using service
       console.log("conatct.ts: get all conatcts");
      
       this.loadingController.showLoader();
       this.service.getAll().subscribe(data => {
        
         this.allDepartments = data;
         this.allDepartmentsOriginal = this.allDepartments;
         this.loadingController.dismissLoader();
    
         //itearte array and assign bsepearte departmental contacts 
       console.log("contacts.page.ts: trting to get biohemistry  data...");
        for (var contact of this.allDepartments){
         ...
         ...
        }
    
    }

我看过this答案和其他各种答案，但似乎无法正确加载/关闭，因为我不断收到异常:覆盖不存在。

感谢任何意见。

Answer 1

当您在呈现加载程序之前关闭加载程序时，会发生“覆盖不存在”错误，您的代码似乎是正确的，但要确保订阅服务内的 getAll() 并在 promise 中返回数据，以便您代码应该是:

getData(){
       //get data form remote serve using service
       console.log("conatct.ts: get all conatcts");
      
       this.loadingController.showLoader();
       this.service.getAll().then((data:any) => {
        
         this.allDepartments = data;
         this.allDepartmentsOriginal = this.allDepartments;
         this.loadingController.dismissLoader();
    
         //itearte array and assign bsepearte departmental contacts 
       console.log("contacts.page.ts: trting to get biohemistry  data...");
        for (var contact of this.allDepartments){
         ...
         ...
        }
    
    }