如何运行加载器直到从 Ionic 4 中的 API 获取响应

Question

我正在我的 Ionic 4 应用程序中工作，并且正在从 API 获取响应。我还将加载器添加到了首页，其中响应来自 API。

我想运行加载程序，直到不再从 API 获取响应为止。

这是我的tab1.page.ts：

import { Component, OnInit } from '@angular/core';
import { ChakapiService } from './../service/chakapi.service';
import { LoadingController, Events } from '@ionic/angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  detu: any;
  newda: any;
  constructor(public chakapi: ChakapiService, public loadingController: LoadingController, public events: Events,
    private storage: Storage) {
    this.detailsfetch('en');
  }
  ngOnInit() {
  }
  async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 2200,
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
    });
    return await loading.onDidDismiss();
  }
}

在此，我从 API 获取响应，并添加了加载程序，但加载程序运行了定义的时间。

我想运行加载程序，直到不再从 API 获取响应为止。

任何帮助深表感谢。

Answer 1

删除duration加载程序中的属性，然后添加到loader.dismiss()服务器调用的订阅中

async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
      loading.dismiss();
    }, error => { loading.dismiss(); });

  }