正文 

当前位置： 首页 > 源码 >

API调用后未更新Angular 2视图

     2023-02-16     306

关键词：

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

在 reloadData 后未调用 cellForRowAtIndexPath

】在reloadData后未调用cellForRowAtIndexPath【英文标题】：cellForRowAtIndexPathnotcalledafterreloadData【发布时间】：2016-08-1519:35:18【问题描述】：我有一个需要通过委托调用更新的表视图控制器。我已经设置了数据源和委托，并且在tableview... 查看详情

Angular 2 - 模型更改后视图不更新

】Angular2-模型更改后视图不更新【英文标题】：Angular2-Viewnotupdatingaftermodelchanges【发布时间】：2016-08-2311:55:43【问题描述】：我有一个简单的组件，它每隔几秒调用一次RESTapi并接收一些JSON数据。我可以从我的日志语句和网络流... 查看详情

在 notifydatasetchanged 后未调用 getview

】在notifydatasetchanged后未调用getview【英文标题】：getviewnotcalledafternotifydatasetchanged【发布时间】：2018-11-2904:12:53【问题描述】：所以我正在处理实时列表视图，我需要列表视图在按钮单击时更新，这些也是如此：privatevoidReloadData(... 查看详情

Angular：异步调用服务器后更新组件视图

】Angular：异步调用服务器后更新组件视图【英文标题】：Angular4:UpdateComponentViewafterAsyncCalltoServer【发布时间】：2018-02-2406:08:54【问题描述】：在ngOnInit生命周期挂钩期间进行服务调用后，我试图更新组件的视图。我订阅了service方... 查看详情

在 Angular 4 中导航后未调用组件代码

】在Angular4中导航后未调用组件代码【英文标题】：ComponentcodenotcalledafternavigationinAngular4【发布时间】：2018-10-0904:58:42【问题描述】：我正在尝试使用Angular5.0.0实现错误处理程序。在实现ErrorHandler接口的错误处理程序中，我将当... 查看详情

使用外部 API 调用更新 Angular Universal 中的元标记

】使用外部API调用更新AngularUniversal中的元标记【英文标题】：UpdatemetatagsinangularuniversalwithexternalAPIcall【发布时间】：2019-03-1620:30:18【问题描述】：我已经花了2个多月的时间，但找不到一个明确的解决方案来说明如何继续使用Angu... 查看详情

API调用后Angular应用程序不更新列表

】API调用后Angular应用程序不更新列表【英文标题】：AngularapplicationnotupdatinglistafterAPIcall【发布时间】：2020-03-2814:16:20【问题描述】：当我删除时，Angular应用程序不会实时更新deleteArticle(id)this.articleService.deleteArticle(id).subscribe((arti... 查看详情

UINavigationBar titleTextAttributes 从视图控制器返回后未更新

】UINavigationBartitleTextAttributes从视图控制器返回后未更新【英文标题】：UINavigationBartitleTextAttributesnotupdatedaftercomingbackfromaViewController【发布时间】：2018-04-2608:31:59【问题描述】：我使用UINavigationController来显示一些视图控制器。每... 查看详情

更新数据源后未重新加载 Rx 表视图

】更新数据源后未重新加载Rx表视图【英文标题】：Rxtableviewnotbeingreloadedafterthedatasourcegetsupdated【发布时间】：2017-11-1009:35:23【问题描述】：我有一个表格视图，我正在尝试使其反应。我使用Swift让它工作。以下是RxSwift代码viewMode... 查看详情

Razor 视图的有界属性在发布后未更新

】Razor视图的有界属性在发布后未更新【英文标题】：Razorview\'sboundedpropertynotupdatingafterpost【发布时间】：2019-06-1819:05:05【问题描述】：在OnPostOrder()执行后，我无法在下面的示例剃刀视图中更新属性价格。我编写了这个示例视图... 查看详情

swift 1.2 / xcode 6.3 更新后未调用获取的结果控制器委托

】swift1.2/xcode6.3更新后未调用获取的结果控制器委托【英文标题】：FetchedResultControllerdelegatenotcalledafterswift1.2/xcode6.3update【发布时间】：2015-04-0910:43:24【问题描述】：我刚刚将我的项目升级到swift1.2。在连续5或6次“转换为最新的S... 查看详情

部分视图刷新后未调用 JavaScript 函数

】部分视图刷新后未调用JavaScript函数【英文标题】：JavaScriptfunctionnotbeingcalledafterPartialViewrefresh【发布时间】：2018-05-3001:35:54【问题描述】：我的表格上有一个带有编辑模式弹出窗口的部分视图，我调用了一个JavaScript函数来填充... 查看详情

成功调用 api 后未调用 cellForRowAtIndexPath

】成功调用api后未调用cellForRowAtIndexPath【英文标题】：cellForRowAtIndexPathnotbeingcalledaftersuccessfulapicall【发布时间】：2014-04-3020:34:13【问题描述】：在我的应用程序中（使用Storyboard仅供参考）我有一个包含tableView的viewController。我的... 查看详情

在使线性布局容器无效后未调用子视图的 ondraw()

】在使线性布局容器无效后未调用子视图的ondraw()【英文标题】：childrenviews\'sondraw()notcalledafterinvalidatelinearlayoutcontainer【发布时间】：2013-11-1503:15:10【问题描述】：我正在编写一个日历视图。当我按下下个月按钮时，我调用了mCal... 查看详情

更新@State后未调用SwiftUI UIViewControllerRepresentable.updateUIViewController

】更新@State后未调用SwiftUIUIViewControllerRepresentable.updateUIViewController【英文标题】：SwiftUIUIViewControllerRepresentable.updateUIViewControllernotbeingcalledafterupdating@State【发布时间】：2019-10-2911:40:14【问题描述】：我正在尝试更改UIViewCont 查看详情

重新加载数据后根据要求更新后未显示 uicollectionview 单元格

】重新加载数据后根据要求更新后未显示uicollectionview单元格【英文标题】：uicollectionviewcellsnotshowedafterupdatesasperrequirementafterreloaddata【发布时间】：2014-05-1414:14:51【问题描述】：我有一个显示在集合视图中的产品目录，用户可以... 查看详情

从 Electron 接收 ipcRenderer.on 后，Angular 2 视图未更新

】从Electron接收ipcRenderer.on后，Angular2视图未更新【英文标题】：Angular2viewnotupdatingafterreceivingipcRenderer.onfromElectron【发布时间】：2017-10-0303:15:38【问题描述】：我正在使用ipcRenderer从我的main.js中的浏览器对话框中检索文件夹路径。... 查看详情

ASP.NET MVC 网站视图模型在发布后未更新，但在发布中运行良好

】ASP.NETMVC网站视图模型在发布后未更新，但在发布中运行良好【英文标题】：ASP.NETMVCwebsiteviewmodelnotupdatingafterpublish,butworksfinerunninginrelease【发布时间】：2020-09-2203:02:49【问题描述】：我对我的ASP.NETMVC网站进行了一些更新，包括... 查看详情