解决angular2 获取到的数据无法实时更新的问题


Posted in Javascript onAugust 31, 2018

今天在工作当中碰到了个问题,当我点击地图上面的城市,从后台获取数据更新列表,明明后台的数据已经返回到前端,但是数据就是不能实时更新到页面上,因为在做第一版的时候是没有这个问题的,就感觉可能是自己调用后台接口的时候顺序出了问题,结果一直钻到死胡同里面去了,后来求助老大,终于把问题解决了,现在记录一下,以加深记忆。

问题:点击下面地图上的城市,更新列表

解决angular2 获取到的数据无法实时更新的问题

getPageList(){
    //this.postMapJson 输入数据
    this.netUserAnalyzeService.getCityOrRegionOrgUserList(JSON.stringify(this.postMapJson))
    .then((res:any)=>{
      var list =res.data.list;
      
        var resList =this.netUserAnalyzeService.list(list);
        this.orgLists = resList;
        this.orgFirstId = res.data.list[0].organizationId;
        this.pageParams.totalItems = res.data.page["totalResult"];
      
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
    },error => this.errorMessage = error)
  }

上面代码中 changeDetectorRef 所调用的具体的方法。

当然在使用之前需要引入:

import {ChangeDetectorRef} from '@angular/core';
constructor(
    private changeDetectorRef:ChangeDetectorRef
  ){}

以上这篇解决angular2 获取到的数据无法实时更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
Web开发之JavaScript
Mar 29 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
AngularJs中$cookies简单用法分析
May 30 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 #Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 #Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 #Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
You might like
php str_replace的替换漏洞
2008/03/15 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP 实现缩略图
2021/03/09 PHP
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python if not in 多条件判断代码
2016/09/21 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
PyQt5响应回车事件的方法
2019/06/25 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
老干部工作先进事迹
2014/08/17 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
临时租车协议范本
2014/09/23 职场文书
欢迎家长标语
2014/10/08 职场文书
给老师的感谢信
2015/01/20 职场文书
求职信格式范文
2015/03/19 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Rust中的Struct使用示例详解
2022/08/14 Javascript