Method does not start at first time (Constructor or Ionviewdidenter)

Question

I have a function that should be loaded and generate a list when the page is loaded, but it does not happen as it should. When you click on the tab referring to the screen, the function is not loaded - going to another view and clicking again, it is loaded normally. The function in the case is loadHistorico(), is being called in Ionviewdidenter(), already put in the constructor and the result was the same.

import { HistoricoModel } from './../../models/HistoricoModel';
import { Component, Inject } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertController, LoadingController, ToastController } from 'ionic-angular';
import { CaixaModel } from './../../models/CaixaModel';
import { HttpClient } from '@angular/common/http';
import { PaginaBase } from '../../infra/PaginaBase';
import { ICaixaService } from './../../providers-interfaces/ICaixaService';
import { CaixasimpleProvider } from './../../providers/caixasimple/caixasimple';
import { NativeStorage } from '@ionic-native/native-storage';
import { CredenciadoProvider } from '../../providers/credenciado/credenciado';

@Component({
  selector: 'page-credenciado-caixa',
  templateUrl: 'credenciado-caixa.html',
  providers: [
    CaixasimpleProvider,
    CredenciadoProvider,
  ]
})
export class CredenciadoCaixaPage extends PaginaBase {
  foiSubmetido: boolean;
  caixaModel: CaixaModel;
  public currentCred;
  public loader;
  public io = new Array<any>();
  public total = "";
  historicoModel: HistoricoModel[];
  public isEmpty: boolean = false;


  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public formBuilder: FormBuilder,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    @Inject('ICaixaService')
    public caixaservice: ICaixaService,
    private nativeStorage: NativeStorage,
    public http: HttpClient,
    public CaixasimpleProvider: CaixasimpleProvider,
    public CredenciadoProvider: CredenciadoProvider) {
    super({
      formBuilder: formBuilder,
      alertCtrl: alertCtrl,
      loadingCtrl: loadingCtrl,
      toastCtrl: toastCtrl
    })
    this.foiSubmetido = false;
    this.caixaModel = new CaixaModel();
    this.nativeStorage.getItem('idCredenciado')
      .then(
        dados => this.currentCred = (dados.idCredenciado), error => { console.log(error); })
    console.log(this.currentCred);
  }

  ionViewDidEnter() {
    this.loadHistorico();
    this.setIsEmpty();
  }

  setIsEmpty() {
    this.nativeStorage.getItem('idCredenciado').then(
      dados => this.CaixasimpleProvider.getHistoricoForIsEmpty(dados.idCredenciado).subscribe(
        data => {
          const response = (data as any);
          if(response == ""){
            this.isEmpty = true;
          }else{
            this.isEmpty = false;
          }
        }
      ));
  }

  loadHistorico() {
    this.showLoading();
    console.log("currentcred no ionviewdidenter -> " + this.currentCred);
    this.CaixasimpleProvider.getTotalFluxoCaixa(this.currentCred).subscribe(
      data => {
        var retorno = (data as any);
        this.total = retorno[0].soma;
      }, error => {
        this.closeLoading();
        console.log(error);
      });

    this.CaixasimpleProvider.getImputOutput(this.currentCred).subscribe(
      data => {
        const response = (data as any);
        console.log(response);
        this.io = response;
        console.log(this.io);
      }, error => {
        this.closeLoading();
        console.log(error);
      });

    this.CaixasimpleProvider.getHistorico(this.currentCred)
      .subscribe(data => {
        var retorno = (data as any);
        this.historicoModel = retorno;
      }, error => {
        this.closeLoading();
        console.log(error);
      });
    this.closeLoading();
  }

  cadastrarValor(caixaModel: CaixaModel): void {
    this.foiSubmetido = true;
    this.esconderToast();
    const mensagem = "Entrada de valor cadastrada!";
    const mensagemErro = "Ocorreu um erro, tente novamente, não iremos decepcionar :)";

    this.CaixasimpleProvider.cadastrarValor(this.caixaModel)
      .subscribe(dados => {
        this.mostrarToast(mensagem);
      },
        erro => { this.mostrarToast(mensagemErro); });
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

  cadastrarValorNeg(caixaModel: CaixaModel): void {
    this.foiSubmetido = true;
    this.esconderToast();
    const mensagem = "Entrada de valor cadastrada!";
    const mensagemErro = "Ocorreu um erro, tente novamente, não iremos decepcionar :)";
    this.caixaModel.valor = "-".concat(this.caixaModel.valor);
    this.CaixasimpleProvider.cadastrarValor(this.caixaModel)
      .subscribe(dados => {
        this.mostrarToast(mensagem);
      },
        erro => { this.mostrarToast(mensagemErro); });
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

  showLoading() {
    this.loader = this.loadingCtrl.create({
      content: "Carregando ..."
    });
    this.loader.present();
  }
  closeLoading() {
    this.loader.dismiss();
  }
}

Answer 1

As all calls are asynchronous the showLoadingand the closeLoading is called in sequence and so gives the impression that is not working, you can put a counter and do the closeLoading only when you have loaded all three requests, below are the settings in loadHistorico and closeLoading that solves this problem:

  loadHistorico() {
    let count = 0; 
    this.showLoading();
    console.log("currentcred no ionviewdidenter -> " + this.currentCred);
    this.CaixasimpleProvider.getTotalFluxoCaixa(this.currentCred).subscribe(
      data => {
        count++;
        this.closeLoading(count);
        var retorno = (data as any);
        this.total = retorno[0].soma;
      }, error => {
        count++;
        this.closeLoading(count);
        console.log(error);
      });

    this.CaixasimpleProvider.getImputOutput(this.currentCred).subscribe(
      data => {
        count++;
        this.closeLoading(count);
        const response = (data as any);
        console.log(response);
        this.io = response;
        console.log(this.io);
      }, error => {
        count++;
        this.closeLoading(count);
        console.log(error);
      });

    this.CaixasimpleProvider.getHistorico(this.currentCred)
      .subscribe(data => {
        count++;
        this.closeLoading(count);
        var retorno = (data as any);
        this.historicoModel = retorno;
      }, error => {
        count++;
        this.closeLoading(count);
        console.log(error);
      });
  }

  closeLoading(count) {
    if(count===3) this.loader.dismiss();
  }