解决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操作JSON实例代码
Feb 09 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
vue视频播放暂停代码
Nov 08 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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/11/06 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python入门篇之正则表达式
2014/10/20 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
django-allauth入门学习和使用详解
2019/07/03 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python实现静态web服务器
2019/09/03 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python 实现简易的记事本
2020/11/30 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
春节联欢会策划方案
2014/05/16 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014年销售部工作总结
2014/12/01 职场文书
高中班主任心得体会
2016/01/07 职场文书
九年级化学教学反思
2016/02/22 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
Pandas数据结构之Series的使用
2022/03/31 Python