Variável com pipe JSON exibe o valor mas o componente informa que é undefined | Front-end

Estou tentando preencher os valores do meu formGroup com os valores que recebi de uma requisição POST através do método:

getAccountInformation();

Na minha página HTML do componente estou exibindo o resultado setado através de {{account | json }}

Informação exibida no HTML com o pipe JSON

{ "id": 1, "name": "Administrador", "lastName": "1", "sexo": "MASCULINO", "email": "admin@admin.com", "birthdate": "01/07/2019", "profiles": [ { "id": 1, "description": "ROLE_ADMIN", "authority": "ROLE_ADMIN" } ], "endereco": { "rua": "Rua Benfica", "numero": "455", "bairro": "Madalena", "cidade": "Recife", "cep": "50720001", "estado": "Pernambuco", "complemento": null }, "primario": { "ddd1": "81", "numeroPrincipal": "999999999" }, "secundario": { "ddd2": "81", "numeroSecundario": "99999999" }, "enabled": true, "username": "admin@admin.com", "authorities": [ { "id": 1, "description": "ROLE_ADMIN", "authority": "ROLE_ADMIN" } ], "accountNonExpired": true, "accountNonLocked": true, "credentialsNonExpired": true }

Porém ao realizar meu método, ele aponta como o valor de this.account preenchida anteriormente pelo POST como undefined, logo eu não posso setar no controlName do formGroup.

Ao executar o método

setFormValues();

recebo no console o valor undefined.

MinhaContaComponent:

import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/core/user/user.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-minha-conta',
  templateUrl: './minha-conta.component.html'
})
export class MinhaContaComponent implements OnInit {

  private account: MyAccount;
  private myAccountForm: FormGroup;

  constructor(
    private userService: UserService,
        private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    this.myAccountForm = this.formBuilder.group({
      firstName: [''],
      lastName: [''],
      email: [''],
      password: [''],
      endereco: this.formBuilder.group({
        street: [''],
        number: [''],
        neighborhood: [''],
        city: [''],
        state: ['']
      })

    });

    this.getAccountInformation();
    this.setFormValues();
  }

  getAccountInformation() {
    this.userService.retrieveLoggedUsersInfo()
      .subscribe(res => {
        this.account = res;
      },
        err => console.error(err)
      );
  }

  atualizar() {
    console.log(this.myAccountForm.value);
  }

  setFormValues() {
    console.log(this.account);
  }
}

Fala aí Yves, tudo bem? Não sei se eu entendi direito, vou comentar uma possível solução baseado no meu entendimento. Caso eu tenha entendido errado, a gente vai conversando.

Acho que o problema do this.account estar vindo undefined é porque você está chamando ele logo após chamar o getAccountInformation.

Mas, o getAccountInformation vai realizar uma chamada para a API que é assíncrona, então, quando chamou o setFormValues pode ser que ainda você não tenha tido a resposta da API.

Sendo assim, o valor inicial da sua account será undefined.

private account: MyAccount;

Para resolver o problema, sugiro chamar o setFormValues dentro do subscribe da função retrieveLoggedUsersInfo. Ficando algo assim:

getAccountInformation() {
    this.userService.retrieveLoggedUsersInfo()
      .subscribe(res => {
        this.account = res;
    this. setFormValues()
      },
        err => console.error(err)
      );
  }

Espero ter ajudado.