相关教程推荐:《angular教程》
问题现象
在开发过程中,遇到前台页面数据不更新的问题。前台页面中采用了插值表达式绑定后台数据字段,在后台调用接口成功后会修改数据字段,但此时前台页面没有自动更新。如下文代码所示,就是很基础的插值表达式的使用,并无特别之处。
<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>
this.platformDataProxy.getSumData(input) .subscribe((result: SumDataDto) => { if (result) { this.sumDataDto = result; } });
问题原因
这个问题涉及到Angular的一个特性——变化检测(Change Detection)。所用的框架是ABP框架,框架自动生成的页面中,添加了changeDetection
这条属性。这条属性指明了当前组件的变化检测策略是OnPush
。
@Component({ templateUrl: './home.component.html', styleUrls: ['./home.component.css'], animations: [appModuleAnimation()], changeDetection:ChangeDetectionStrategy.OnPush })
关于变化检测策略,有两种:
Default:Default
策略是默认策略,只要有值发生变化,就对组件及其子孙组件进行检查。
OnPush:OnPush
策略是只有当输入数据(@Input
)的引用发生变化或者有事件触发时,组件才进行变化检测。这种策略检查不彻底,但效率高。
解放方案方案一,直接删掉这条属性赋值方案二,手动进行变化检测
方案一很简单,就是直接删掉组件中这条变化检测策略的赋值语句。这样组件将采用默认策略,缺点就是效率变低了。
方案二就是在调用接口成功后,手动调用变化检测机制的触发函数。这里要用到变化检测对象。
首先引入变化检测的模块
import { ChangeDetectorRef } from “angular”;
然后声明变化检测对象
constructor(private changeDetection:ChangeDetectorRef) {}
在接口调用成功后调用变化检测方法
this.platformDataProxy.getSumData(input) .subscribe((result: SumDataDto) => { if (result) { this.sumDataDto = result; this.changeDetection.detectChanges(); } });
有点手动调用C#的垃圾回收机制的味道。
参考资料:
https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010928087
https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Flskzj%2Fp%2F11143233.html
更多编程相关知识,请访问:编程教学!!
最新评论