如何在使用async ngOnInit后更新视图？

Question

我有这样的情况：我需要调用4个服务来获得一个组件所需要的所有信息。我需要调用4个服务来获得一个组件所需要的所有信息，当这个异步上下文解析时，视图已经被建立了（我现在没有办法避免）。当这个异步上下文解析时，视图已经被建立了（我现在没有办法避免这种情况）如何在ngOnInit解析后更新视图？

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;
    } 
  }

这就是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>

Answer 1

事实上，我在编码时忘记了一些细节。首先，加载控件和部分结构应该有点不同。我不知道如何用观测值来实现，但如果有人知道的话，是时候分享了。

我的解决方案

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;
}

}