相关教程推荐：《angular教程》
问题现象
在开发过程中，遇到前台页面数据不更新的问题。前台页面中采用了插值表达式绑定后台数据字段，在后台调用接口成功后会修改数据字段，但此时前台页面没有自动更新。如下文代码所示，就是很基础的插值表达式的使用，并无特别之处。
{{sumDataDto.thirdAll}}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
更多编程相关知识，请访问：编程教学！！
