0

Como faz para pegar esse valor da variavel user e colocar dentro do FormGroup? No .ts eu fiz assim:

ngOnInit(): void {

    this.id = this.activatedRoute.snapshot.params['id'];
    this.service.listById(this.id).subscribe(obj => this.user = obj); 

    //alert("Nome: " + this.user.name); // undefined!!

    this.formEdit = this.formBuilder.group({
       name: ['',[Validators.required, Validators.minLength(2), Validators.maxLength(256)]],
       imageUrl: ['',[Validators.minLength(10)]],
       email: ['',[Validators.required, Validators.minLength(8), Validators.maxLength(256)]],
       page: ['',[Validators.minLength(8)]],
       registrationDate: [this.date],
    });
  }

O id está chegando tranquilamente. Com interpolação eu consigo imprimir um "user.name", mas se eu der um alerta com "user.name" dentro do .ts, ele dá undefined.

3
  • 1
    Só eu nesse mesmo site, já comentei umas 500 vezes essa mesma questão. O método listById(this.id) é um Observable o que seria equivalente a Promise do JavaScript, e o subscribe seria equivalente ao then, resumindo tudo, são todos métodos assíncronos, ou seja, a resposta do servidor para onde foi feita a requisição pode ser rápida, demorar ou nem acontecer. Por isso quando da o alert() a variável está undefined, pq ela ainda não foi definida (preenchida com a resposta da API)!
    – LeAndrade
    Commented 15/04/2021 às 11:41
  • 1
    Impressionante como cada 3 questões de angular uma é essa, parece que o site não está funcionando pro povo pesquisar Commented 15/04/2021 às 17:39
  • Tem sim, mas meu caso aqui era só saber como escrever o que quero, de uma forma que o angular compreenda. Commented 16/04/2021 às 3:00

1 Resposta 1

1

É isso mesmo que o @LeAndrade falou. Quando vc chama o alert, a resposta da requisição listById ainda não chegou pq é um Observable. Ou seja, não deu tempo ainda de chegar a resposta e vc já está chamando o alert. Para resolver isso vc precisa colocar o alert dentro do subscribe ou utilizar algum operador RxJS.

Dentro do subscribe ficaria assim:

ngOnInit(): void {

  this.id = this.activatedRoute.snapshot.params['id'];
  this.service.listById(this.id).subscribe(obj => {
    this.user = obj;
    alert("Nome: " + this.user.name);
  });
}

Ou vc pode usar o operador switchMap do RxJS. Com esse operador, ele só vai chamar a segunda função, após o término da primeira:

ngOnInit(): void {
    this.id = this.activatedRoute.snapshot.params['id'];
    this.service.listById(this.id).pipe(
        switchMap(result => this.user = result))
      .subscribe(() => alert("Nome: " + this.user.name));

1
  • Valeu mesmo Lucas Latorre. Aqui eu separei o formGroup em um método, chamei o método dentro do subscribe passando como argumento o objeto user. Bem... O update quebrou porque perdeu o id, mas já resolvi. A linha ficou assim: code ngOnInit(){ this.id = this.activatedRoute.snapshot.params['id']; this.service.listById(this.id).subscribe((user: User) => this.buildForm(user)); } code Commented 16/04/2021 às 3:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .