解决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之三(封装和信息隐藏)
Jan 27 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
树莓派升级python的具体步骤
2020/07/05 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
行政管理专业推荐信
2013/11/02 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
《雨点》教学反思
2014/02/12 职场文书
单位租房协议范本
2014/12/03 职场文书