解决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学习笔记-详解in运算符
Sep 13 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
js刷新页面location.reload()用法详解
Dec 09 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遍历CSV类实例
2015/04/14 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
JS中的phototype详解
2017/02/04 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
python pandas库的安装和创建
2019/01/10 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
应届生会计求职信
2013/11/11 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
气象学专业个人求职信
2014/03/15 职场文书
小学生毕业评语
2014/12/26 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书