解决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更改class和id的方法
Oct 10 Javascript
异步加载script的代码
Jan 12 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
vue实现公共方法抽离
Jul 31 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
大学信息公开实施方案
2014/03/09 职场文书
公司年终奖分配方案
2014/06/16 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书