API调用后未更新Angular 2视图

Posted 2023-02-16

【中文标题】API调用后未更新Angular 2视图

【英文标题】：Angular 2 view not updated after API call

【发布时间】：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

【参考方案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 的方向背道而驰 - 就此而言，所有反应式和异步 - 平台都在发展