解决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 11 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
js实现无缝滚动特效
Dec 20 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Linux下python制作名片示例
2018/07/20 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
举例讲解Python装饰器
2020/12/24 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
教师节感想
2015/08/11 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
详解Vue router路由
2021/11/20 Vue.js