Search by id at angle

Asked

Viewed 38 times

0

How do you take this value of the user variable and put it inside the Formgroup? No . ts I did so:

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],
    });
  }

The id is coming quietly. With interpolation I can print a "user.name", but if I give an alert with "user.name" inside . ts, it gives Undefined.

angular
  • 1

    Just me on this same site, I have commented 500 times this same question. The method listById(this.id) is a Observable which would be equivalent to Promise of Javascript, and the subscribe would be equivalent to then, in short, they are all methods assíncronos, i.e., the response of the server to which the request was made can be fast, linger or not happen. So when you give Alert() the variable is undefined, pq it has not yet been defined (filled with the API response)!

  • 1

    Impressive how every 3 questions of one is that, it seems that the site is not working pro people search

  • It does, but my case here was only to know how to write what I want, in a way that the angular understands.

1 answer

1


That’s exactly what @Leandrade said. When you call Alert, the response to the request listById It has not yet arrived because it is an Observable. That is, there is not yet time to get the answer and you are already calling the Alert. To resolve this you need to put Alert inside the subscribe or use some Rxjs operator.

Inside the subscribe would look like this:

ngOnInit(): void {

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

Or you can use the operator switchMap of Rxjs. With this operator, it will only call the second function, after the end of the first:

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

  • Thanks even Lucas Latorre. Here I separated formGroup into a method, called the method inside the subscribe by passing as argument the user object. Well... The update broke because it lost the id, but I already solved it. The line looks like this: code ngOnInit(){ this.id = this.activatedRoute.snapshot.params['id']; this.service.listById(this.id). subscribe((user: User) => this.buildForm(user)); } code

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.