解决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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
浅谈javascript的调试
Jan 28 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
详解JavaScript 的执行机制
Sep 18 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制作简单的内容采集器的代码
2007/11/28 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
微信小程序开发探究
2016/12/27 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
Vue实现剪贴板复制功能
2019/12/31 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Python中str.join()简单用法示例
2018/03/20 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python批量爬取下载抖音视频
2019/06/17 Python
python装饰器常见使用方法分析
2019/06/26 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
公司建议书怎么写
2014/05/15 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python