How to update view when/after using async ngOnInit?

Question

I have this situation. I need to call 4 services to have all the information that a component needs. When this async context resolves, the view is already built (I don´t have a way to avoid that right now) How to update the view after ngOnInit resolves?

ngOnInit() {
    this.ecsSelecionados = [];
    this.initMCC();
  }

  async initMCC(){

    try {
      this.loading = true;
      const listaEcs = [];
      const descricaoMCC: MccDescricaoPostModel[] = [];

      await this.simuladorGvService.obterDadosGcom().toPromise().then(mccs => {
        this.listaECporMCC = mccs;
        this.listaECporMCC.map(mcc => {
          mcc.ecs.map(ec => {
            listaEcs.push(ec.numeroDoEstabelecimento);
            descricaoMCC.push({numeroEC: ec.numeroDoEstabelecimento, codigoMCC: ec.ramoAtividade});
          });
      });
        return listaEcs;
      }).then(listaEcs => {
          return zip(
            this.simuladorGvService.verificarElegibilidadeEcs(listaEcs),
            this.simuladorGvService.verificarElegibilidadeRREcs(listaEcs),
          ).toPromise();
      }).then(([listaElegibilidade, listaElegibilidadeRR]) => {
        this.listaElegibilidade = listaElegibilidade;
        this.listaElegibilidadeRR = listaElegibilidadeRR;
      }).then(() => {
        const cadeia = new CadeiaMccDescricaoPostModel(descricaoMCC);
        return this.simuladorGvService.obterDescricaoEcs(cadeia).toPromise();
      }).then(listaMCCLabel => {
        this.listaMCCLabel = listaMCCLabel;
      });

    } catch (error) {
      console.log(error);
    } finally {
      this.loading = false;
    } 
  }

that´s the html

<section class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12" style="border: 1px solid rgba(170, 170, 170, 1);padding: 0;">

<div class="container">
     <div class="ui-g-12 ui-md-12 ui-lg-12 ui-sm-12">
        <h3>Simulação em Cadeia de MCC</h3>
            <app-tabela-ec-cadeia [listaECporMCC]="listaECporMCC" 
                                  [listaElegibilidadeRR]="listaElegibilidadeRR" 
                                  [listaElegibilidade]="listaElegibilidade" 
                                  [listaMCCLabel]="listaMCCLabel"
                                  (updateListaDeECSelecionado)="onSelect($event)"></app-tabela-ec-cadeia>

    </div>
</div>

Is there a reason you're converting observables to promises? — Kurt Hamilton, Apr 22 '20 at 18:42
Can you be more specific? Synchronizing which actions? Can you provide a simple demo in stackblitz that shows what you want to achieve that can't be done with observables? — Kurt Hamilton, Apr 29 '20 at 13:43

score 0 · Answer 1 · answered May 04 '20 at 11:57

Actually I forgot some details when coding. First, the loading control, and also part of the structure should be a little different. I don´t know how it could be done with observables, but if someone knows it´s time to share.

My Solution

async initMCC() {

try {
  this.loading = true;
  const listaEcsMCC = [];
  const descricaoMCC: MccDescricaoPostModel[] = [];

  this.listaECporMCC = await this.simuladorGvService.obterDadosGcom().toPromise();
  if (this.listaECporMCC) {
    this.listaECporMCC.map(mcc => {
      mcc.ecs.map(ec => {
        listaEcsMCC.push(ec.numeroDoEstabelecimento);
        descricaoMCC.push({
          numeroEC: ec.numeroDoEstabelecimento,
          codigoMCC: ec.ramoAtividade
        });
      });
    });

    await Promise.resolve(listaEcsMCC).then(listaEcs => {
      return zip(
        this.simuladorGvService.verificarElegibilidadeEcs(listaEcs),
        this.simuladorGvService.verificarElegibilidadeRREcs(listaEcs),
      ).toPromise();
    }).then(async ([listaElegibilidade, listaElegibilidadeRR]) => {
      this.listaElegibilidade = listaElegibilidade;
      this.listaElegibilidadeRR = listaElegibilidadeRR;
    }).then(() => {
      const cadeia = new CadeiaMccDescricaoPostModel(descricaoMCC);
      return this.simuladorGvService.obterDescricaoEcs(cadeia).toPromise();
    }).then(async listaMCCLabel => {
      this.listaMCCLabel = listaMCCLabel;
    });
  }
} catch (error) {
  console.log(error);
} finally {
  this.loading = false;
}

}

How to update view when/after using async ngOnInit?

1 Answers1