解决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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue加载完成后的回调函数方法
Sep 07 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
Javascript webpack动态import
Apr 19 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
文章推荐系统(三)
2006/10/09 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
教学大赛获奖感言
2014/01/15 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
火车的故事教学反思
2014/02/11 职场文书
安全施工标语
2014/06/07 职场文书
条幅标语大全
2014/06/20 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书