Angular 6 мои интерполированные свойства не обновляются в пользовательском интерфейсе после его обновления в API

Question

Ну, я пытаюсь обновить / отредактировать пользователя, он прекрасно обновляется на API.

У меня есть событие клика

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

Но он не обновляет интерфейс в моих интерполированных значениях. Он обновляется только после того, как я вручную обновил страницу

Итак, вопрос, как заставить принудительно перезагрузить мой компонент, не обновляя всю страницу? location.reload()

Я искал какое-то решение, подобное этому, но у меня оно не сработало

    this.router.navigateByUrl('/RefrshComponent' {skipLocationChange:true}).then(()=>
    this.router.navigate(["Your actualComponent"])); 

Answer 1

На основании вашего комментария вы подписываетесь на свой сервис. Как упомянул Nikhil, это асинхронно, поэтому вы перемещаетесь до завершения запроса. Чтобы избежать этого, подпишитесь на компонент, а внутри обратного вызова подписки перейдите к вашему компоненту. Я бы не советовал подписываться на услугу в любом случае, так как обычно мы хотим что-то сделать, когда запрос завершен, как в этом случае, когда мы хотим перемещаться, когда запрос завершен.

Так что ваш сервис должен выглядеть так:

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

Затем в вашем компоненте подпишитесь и перейдите:

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

Стоит прочитать, чтобы немного лучше понять, как работает асинхронность: Как вернуть ответ от вызова Observable / http / async в угловом формате?