Angular 6 我的插值属性在 API 中更新后未在 UI 中更新

Question

好吧，我正在尝试 update/edit 用户它在 API 上更新正常。

我有这个点击事件

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

但它不会在我的插值 UI 上更新。它仅在我手动刷新页面后更新

所以问题是我如何在不刷新整个页面的情况下强制重新加载我的组件？ 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']));
}

值得一读，以便更好地理解异步性的工作原理：

Angular 6 my interpolated properties not updated in UI after it updates in API