2

Well i am trying to update/edit user it updates fine on API.

I have this click event

onSubmit() {
this.service.updateUser(this.user)
this.router.navigate(['/users']);
}

But it doesn't update on UI in my interpolated values. It only updates after i manually refresh the page

So the question how do i force to reload my component, without refreshing the whole page? location.reload()

I was looking for some solution like this, but it didnt't worked for me

    this.router.navigateByUrl('/RefrshComponent' {skipLocationChange:true}).then(()=>
    this.router.navigate(["Your actualComponent"]));
Dovydas
  • 41
  • 2
  • 8
  • Trying to understand the issue: * You have user component where you can update user and it is saved on server using API call * You navigate to /users where all users are shown and here the updated user info is not shown? Am I correct? Check if you are getting stale data in '/users' , may be server call is yet not complete? only navigate to /users when updateUser call is complete. – Nikhil Walvekar Mar 06 '19 at 17:34
  • Thats right, it saves on API call, then after this save i navigate to this component `this.router.navigate(['/users']);` but the values after save on html is not updated, only if reload/refresh the page manually – Dovydas Mar 06 '19 at 17:37
  • The code you posted above does not wait for **updateUser** to finish. This must be asynchronous operation. You can return observable / promise and then navigate once the operation is complete. – Nikhil Walvekar Mar 06 '19 at 17:43
  • so i should update my service for update? `updateUser(us){ return this.http.put(this.apiUrl + '/' + us.id, us).subscribe() }` if so how ? – Dovydas Mar 06 '19 at 18:04

1 Answers1

2

Based on your comment, you are subscribing in your service. As mentioned by Nikhil, this is asynchronous, so you are navigating before the request has finished. To avoid this, subscribe in the component, and inside the subscribe callback, navigate to your component. I would not suggest to subscribe in the service anyway, since usually we want to do something when a request has finished, just like in this case, where we want to navigate when request has finished.

So your service should look like:

updateUser(us) { 
  return this.http.put(this.apiUrl + '/' + us.id, us);
}

Then in your component, subscribe and navigate:

onSubmit() {
  this.service.updateUser(this.user)
    .subscribe(() => this.router.navigate(['/users']));
}

Worth a read for understanding a bit better how asynchronicity works: How do I return the response from an Observable/http/async call in angular?

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thank you for very explanatory response. I tried to do as you gave the example with onSubmit() method https://ibb.co/0G694f9. cant bind subscribe for some reason. – Dovydas Mar 06 '19 at 19:40
  • Did you remove the `subscribe` from the service, like I explained. I think not, since error suggests that you are still subscribing in service :) – AT82 Mar 06 '19 at 19:45
  • Oh... you are right. thank you very much for the help, it works perfectly now. – Dovydas Mar 06 '19 at 19:49
  • Great, glad to hear! :) :) – AT82 Mar 06 '19 at 19:55