問題現(xiàn)象

在開發(fā)過程中，遇到前臺頁面數(shù)據(jù)不更新的問題。前臺頁面中采用了插值表達式綁定后臺數(shù)據(jù)字段，在后臺調(diào)用接口成功后會修改數(shù)據(jù)字段，但此時前臺頁面沒有自動更新。如下文代碼所示，就是很基礎的插值表達式的使用，并無特別之處。

<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策略是默認策略，只要有值發(fā)生變化，就對組件及其子孫組件進行檢查。

• OnPush：OnPush策略是只有當輸入數(shù)據(jù)（@Input）的引用發(fā)生變化或者有事件觸發(fā)時，組件才進行變化檢測。這種策略檢查不徹底，但效率高。

解放方案

• 方案一，直接刪掉這條屬性賦值
• 方案二，手動進行變化檢測

方案一很簡單，就是直接刪掉組件中這條變化檢測策略的賦值語句。這樣組件將采用默認策略，缺點就是效率變低了。

方案二就是在調(diào)用接口成功后，手動調(diào)用變化檢測機制的觸發(fā)函數(shù)。這里要用到變化檢測對象。
首先引入變化檢測的模塊

import { ChangeDetectorRef } from “angular”;

然后聲明變化檢測對象

constructor(private changeDetection:ChangeDetectorRef) {}

在接口調(diào)用成功后調(diào)用變化檢測方法

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
          this.changeDetection.detectChanges();
        }
      });

有點手動調(diào)用C#的垃圾回收機制的味道。

參考資料：
Angular系列之變化檢測(Change Detection)
angular 的 ChangeDetectorRef