angular4數據改變,頁面沒有渲染解決方法

代碼塊中ts數據進行了更新,view視圖保持不變 
可以引入angular4的 ChangeDetectorRef 

//頁面引入所需模塊
import { ChangeDetectorRef } from '@angular/core';

//注入服務
constructor(public changeDetectorRef:ChangeDetectorRef ) {
 

該方法有以下幾種方法:

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}`

markForCheck()方法有時候在angular的zone之後。會不生效
detectChanges() 
檢查一遍 變化檢測器 (change detector) 和它的子檢測器。可以配合 ChangeDetectorRef 來實現局部變化檢查。有些時候,對於更新頻繁數據量又很大的列表,我們不想 angular 在列表變化的時候馬上更新視圖,我們可以手動去調用 detectChanges 方法,去強制 angular 檢查 組件數據的變化。這樣一來,就可以實現自主控制視圖更新頻率,而不用擔心有太大的性能問題了。
checkNoChanges() 
檢測該組件及其子組件,如果有變化存在則報錯,用於開發階段二次驗證變化已經完成。
detach() 
從變化檢測樹中分離變化檢測器,該組件的變化檢測器將不再執行變化檢測,除非手動調用 reattach() 方法。當我們在組件上調用 ChangeDetectorRef 的 detach 方法之後,angular 在該組件數據發生變化的時候,不再執行更新視圖等操作。
reattach() 
重新添加已分離的變化檢測器,使得該組件及其子組件都能執行變化檢測。讓 angular 在組件數據發生變化的時候重新檢測該組件的變化,在該組件數據變化的時候,執行如更新視圖的操作。

 

舉例:
 if (value) {
      this.ChangeDetectorRef.reattach();
    } else {
      this.ChangeDetectorRef.detach();
    }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();

轉:https://blog.csdn.net/fish_dw/article/details/81019214

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章