Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

angular2+数据更新但视图不更新的解决方法

Posted on 2018年5月28日2018年5月28日 by king2088

最近项目中总是遇到一些莫名其妙的问题,当然这个项目已经存在已久,之前也有过这样的问题,现在感觉问题总是显得很突出,大部分问题都是由于数据更新后,视图无法及时更新而导致的,由于项目的代码原因,我就不多去深入为什么会发生这个问题了,主要的是说一下解决这个问题的方法。
场景
如果你在组件中定义了一个变量,当你使用console能将其值打印出来,可是我们能看到的视图中,这个变量并没有任何值或者改动。又或者你在一个点击事件中去改变相关变量的值,让其显示在视图上,但是当你点击事件触发后,变量的值是改变了,但是视图却为更新。这个时候你就可以使用以下几种方法

1、直接使用ngZong.run()

我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如:
ngZong.run(()=>{this.closeNum()})

2、ChangeDetectorRef.detectChanges()

此方法本人使用的不多,并没有切确的深入了解这个方法,而且我在进行测试中,这个方法对我来说并未产生任何效果,如果你想要尝试一下,建议看一下官方文档https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

3、直接使用ngDocheck()生命周期

我们可以将相关代码直接放到ngDocheck中,即可实现视图强制更新。但是一定要注意ngDocheck特别像setInterval,不论你数据是否发生改变他都会执行,并且任意一个事件都有可能触发它。因此得需要慎用,以防影响到性能

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme