Notes for a front-end developer, esyou.net

0%

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

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

1、直接使用ngZong.run()
我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如:

1
ngZong.run(()=>{this.closeNum()})

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

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