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

【问题标题】：Angular 6 my interpolated properties not updated in UI after it updates in APIAngular 6 我的插值属性在 API 中更新后未在 UI 中更新
【发布时间】：2019-07-28 10:57:11
【问题描述】：

我正在尝试更新/编辑用户，它在 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"]));

【问题讨论】：

试图理解这个问题： * 您有用户组件，您可以在其中更新用户，并使用 API 调用将其保存在服务器上 * 您导航到显示所有用户的 /users 以及更新的用户信息没有显示？我对么？检查您是否在 '/users' 中获取过时数据，可能是服务器调用尚未完成？仅在 updateUser 调用完成时导航到 /users。
没错，它保存了 API 调用，然后在保存后我导航到这个组件 this.router.navigate(['/users']); 但保存到 html 后的值不会更新，只有手动重新加载/刷新页面跨度>
您在上面发布的代码不会等待 updateUser 完成。这必须是异步操作。您可以返回 observable / promise，然后在操作完成后导航。
所以我应该更新我的服务以进行更新？ updateUser(us){ return this.http.put(this.apiUrl + '/' + us.id, us).subscribe() } 如果是这样怎么办？

标签： angular properties interpolation router reload

【解决方案1】：

根据您的评论，您正在订阅您的服务。正如 Nikhil 所提到的，这是异步的，因此您在请求完成之前进行导航。为避免这种情况，请在组件中订阅，并在订阅回调中导航到您的组件。无论如何，我不建议订阅服务，因为通常我们希望在请求完成后做一些事情，就像在这种情况下，我们想要在请求完成时导航。

所以你的服务应该是这样的：

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

然后在您的组件中，订阅并导航：

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

值得一读以更好地了解异步性的工作原理：How do I return the response from an Observable/http/async call in angular?

【讨论】：

感谢您非常详细的回复。我尝试按照您给出的示例使用 onSubmit() 方法ibb.co/0G694f9 进行操作。由于某种原因无法绑定订阅。
您是否像我解释的那样从服务中删除了subscribe。我不认为，因为错误表明您仍在订阅服务:)
哦...你是对的。非常感谢您的帮助，现在可以正常使用了。
太好了，很高兴听到！ :) :)