Angular - выполнять один метод перед другим

Question

У меня есть два метода: один создает значение pu sh, а другой - patchValue, мне нужно, чтобы значение pu sh было завершено, чтобы метод значения patch мог работать правильно. Я вызываю их оба в ngAfterViewInit, я хотел бы знать, как сделать это, не вызывая метод значения патча внутри метода значения pu sh.

Здесь вызываются оба метода

ngAfterViewInit(): void {
        this.inicializarListaGrupoAnaliseCae();
        this.iniciarDadosVisualizar();
        //this.iniciarSituacaoCadastro();
        this.cdr.detectChanges();
    }

Метод PatchValue:

iniciarDadosVisualizar() {
        if(this.isVisualizando || this.isEdit){
            this.dadosVisualizar.grupoAnaliseCae.noGrupoAnaliseCae='CONSELHO';
            this.formPesquisar.controls['descricaoMotivo'].patchValue(this.dadosVisualizar.descricaoMotivo);
            this.formPesquisar.controls['grupoAnaliseCae'].patchValue(this.dadosVisualizar.grupoAnaliseCae);
            this.formPesquisar.controls['categoriaMembro'].patchValue(this.dadosVisualizar.grupoAnaliseCae);
            this.formPesquisar.controls['situacaoMotivo'].patchValue(this.dadosVisualizar.situacaoMotivo);
        }
        if(this.isVisualizando){
            this.desabilitarCampos()
        }
    };

Pu sh Метод значения:

private inicializarListaGrupoAnaliseCae(): void {
        this.grupoAnaliseCaeService
            .findAll()
            .subscribe(res => {
                res.forEach((grupoAnaliseCae: GrupoAnaliseCae) => {
                    if(grupoAnaliseCae.nuNivelGrupo==null){
                    this.listaGrupoAnaliseCae.push({ label: grupoAnaliseCae.noGrupoAnaliseCae, value: grupoAnaliseCae });
                    this.formataNomeGrupo();
                    }
                });
            });
    }

Answer 1

Первый метод является асинхронным и не возвращает ничего, что является проблемой. Вместо подписки внутри этого метода вы должны вернуть наблюдаемое. Затем в ngAfterViewInit вы можете подписаться на него и вызвать второй метод, когда он будет завершен.

Я не уверен, нужно ли вам возвращать что-либо в вашем Observable для другого, поэтому Observable<void> или другой возврат может быть более подходящим.

Новый метод pu sh

private inicializarListaGrupoAnaliseCae(): Observable<void> {
        return this.grupoAnaliseCaeService
            .findAll()
            .pipe(
                tap(res => {
                    res.forEach((grupoAnaliseCae: GrupoAnaliseCae) => {
                        if(grupoAnaliseCae.nuNivelGrupo==null){
                        this.listaGrupoAnaliseCae.push({ label: grupoAnaliseCae.noGrupoAnaliseCae, value: grupoAnaliseCae });
                        this.formataNomeGrupo();
                        }
                    });
                })
           );
    }

New ngAfterViewInit

ngAfterViewInit(): void {
        this.inicializarListaGrupoAnaliseCae().subscribe(() => {
          this.iniciarDadosVisualizar();
          //this.iniciarSituacaoCadastro();
          this.cdr.detectChanges();
        });
        
    }

Обратите внимание, я не управляю подпиской Вот. Если ваш метод findAll () является HTTP-запросом, он должен завершиться после загрузки данных, поэтому это не будет проблемой, но если это что-то еще, вам может потребоваться выяснить, как вы хотите отказаться от подписки.

Answer 2

После того, как вы ввели в свою программу единственную точку реактивной парадигмы (здесь подписка), все зависимые последующие операторы также должны быть реактивными. Самым быстрым решением в вашем сценарии будет вызов зависимой функции внутри подписки.

ngAfterViewInit(): void {
  this.inicializarListaGrupoAnaliseCae();
  this.cdr.detectChanges();
}

private inicializarListaGrupoAnaliseCae(): void {
  this.grupoAnaliseCaeService
    .findAll()
    .subscribe(res => {
      res.forEach((grupoAnaliseCae: GrupoAnaliseCae) => {
        if (grupoAnaliseCae.nuNivelGrupo == null) {
          this.listaGrupoAnaliseCae.push({
            label: grupoAnaliseCae.noGrupoAnaliseCae,
            value: grupoAnaliseCae
          });
          this.formataNomeGrupo();
        }
      });
      this.inicializarListaGrupoAnaliseCae();      // <-- call function here
    });
}

Подробнее об асинхронных данных можно узнать здесь .

Answer 3

Я предполагаю, что ваши начальные значения (pushValues) поступают из службы HTTP, разрешение которой может занять некоторое время. По сути, вы здесь ищите состояние, то есть вам нужно знать состояние формы перед исправлением. В этом случае вы можете использовать BehaviorSubject или просто обычную переменную, чтобы отслеживать состояние, готова ли форма к исправлению или нет.

private isFormInitialized = false;

В наблюдаемом вами инициализаторе:

private inicializarListaGrupoAnaliseCae(): void {
    this.grupoAnaliseCaeService
        .findAll()
        .subscribe(res => {
            res.forEach((grupoAnaliseCae: GrupoAnaliseCae) => {
                if(grupoAnaliseCae.nuNivelGrupo==null){
                this.listaGrupoAnaliseCae.push({ label: grupoAnaliseCae.noGrupoAnaliseCae, value: grupoAnaliseCae });
                this.formataNomeGrupo();
                }
            });

            // update form state tracker
            this.isFormInitialized = true;
        });
}

Теперь используйте состояние для проверки перед патчем:

iniciarDadosVisualizar() {
    if(this.isFormInitialized && this.isVisualizando || this.isEdit){
    ... // other logic
};

Answer 4

Попробуйте преобразовать наблюдаемое в обещание следующим образом:

private async inicializarListaGrupoAnaliseCae(): Promise<any> {
        return this.grupoAnaliseCaeService
            .findAll()
            .toPromise().then(res => {
                res.forEach((grupoAnaliseCae: GrupoAnaliseCae) => {
                    if(grupoAnaliseCae.nuNivelGrupo==null){
                    this.listaGrupoAnaliseCae.push({ label: grupoAnaliseCae.noGrupoAnaliseCae, value: grupoAnaliseCae });
                    this.formataNomeGrupo();
                    }
                });
            });
    }

Затем дождитесь этого обещания в ngAfterViewInit вот так:

async ngAfterViewInit(): void {
    await this.inicializarListaGrupoAnaliseCae();
    this.iniciarDadosVisualizar();
    //this.iniciarSituacaoCadastro();
    this.cdr.detectChanges();
}

Здесь иллюстрация StackBlitz.