API调用后未更新Angular 2视图答案

【问题标题】：Angular 2 view not updated after API callAPI调用后未更新Angular 2视图
【发布时间】：2017-05-10 13:44:35
【问题描述】：

我有一个 angular2 组件，在其中我有一个通过调用服务方法从 API 调用填充数据的方法。

getData() {
  this.someBinding = "Initial value";
  this.someService.get('some url').then(() => {
    this.someBinding = "Updated Value";
   }
  ).catch(//error handling)
}

我在 ngOnInit() 生命周期钩子中调用 getData() 方法，如下所示：

ngOnInit(){
  this.getData();
}

问题是，API 调用完成后内部视图 {{someBinding}} 没有更新。我在 API 调用中正确获取数据，但绑定未更新。

我找到了在数据到达 getData().then() 后手动触发更改检测 (this.cdr.detectChanges()) 的解决方案，效果很好。

在这种情况下，我无法确定问题所在，为什么我需要手动触发更改检测。我还没有找到原因，但解决方案效果很好。请解释。

【问题讨论】：

这取决于您的服务。它如何检索数据？
服务以 promise 的形式检索数据（通过将 observable 转换为 promise）
你在使用 Angular 的 http 服务吗？
是的，我使用 Http 的 Angular 类，它返回一个 observable，我通过调用 toPromise() 方法将其转换为 Promise。我正在完美地获取数据，但是为了绑定到更新，我不得不手动运行更改检测，我不想这样做。否则绑定不更新，我想知道，为什么？
他们应该更新。或者您的组件（或其父组件之一）正在使用不同的ChangeDetectionStrategy

标签： angular data-binding angular2-changedetection

【解决方案1】：

你不需要将 observable 转换为 promise，最好直接使用 observable。

服务：

getData(): Observable<Something> {
  return this.http.get(...)
}

组件：

ngOnInit() {
  this.someBinding = this.service.getData();
}

组件模板：

{{ someBinding | async }}

Angular 可以使用异步直接在视图中渲染 observables。当组件被销毁时，它也会自动取消订阅。最好坚持使用 Observable API，因为它在整个 Angular 应用程序中都使用过

【讨论】：

我在 angular2 中有一个大型应用程序，执行多个 Http 调用，所以我编写了一个包装器，可以在 promise 中转换 observable。有了承诺，它应该可以正常工作吗？因为我在代码中的其他任何地方都没有遇到这个问题。
Observables 比 Promise 强大得多，并且能够更好地处理带有许多 http 调用的大型应用程序。将它们全部转换为 Promise 是一个巨大的倒退，并且与 Angular 的方向背道而驰 - 就此而言，所有反应式和异步 - 平台都在发展