解决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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
js常用代码段整理
Nov 30 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
python中必要的名词解释
2019/11/20 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
分公司经理任命书
2014/06/05 职场文书
党的生日活动方案
2014/08/15 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
个人工作表现评价材料
2014/09/21 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技