如何等到ng2完成更改DOM

我在我的web-app中有打印功能。我正在使用jquery打印插件在打印預覽中只顯示dom中的幾個元素。我想確保只有在所有數據都被渲染後纔開始打印。在目前的實現 - 有時打印預覽出現並不是所有的信息在DOM（我認爲ng2使用某種延期的操作）。如何等到ng2完成更改DOM

看看樣品：

@Component(...) 
export class MyCoolComponent{| 

myModel:MyModel; 


print(){ 
    _myService.fetchDataSomehow().subscribe((newData:MyModel)=>{ 
     this.myModel = newData; 
     // I need to wait until ng2 will adjust dom with new data in synchronous manner 
     $(this._el).print(); 
    }) 
} 
}

模板：

<div> 
    {{myModel.field1}} 
    {{myModel.field2}} 
    {{myModel.field3}} 
    //...and a lot of other fields from myModel 
</div>

我知道，我可以使用setTimeout(()=>{...}, 1)，但它看起來很傻。由於模型更改，是否有更堅實的方法等待角度2調整dom？

來源

2016-09-27 Maris

結帳ngAfterViewChecked在docs，也許這是你在找什麼。

來源

2016-09-27 12:04:31 kit

我已嘗試使用ngAfterViewChecked獲取，但它觸發多次在每個變化DOM。但是，當最後的更改應用於DOM時，我需要以某種方式進行跟蹤。 – Maris

你知道有多少元素會做出改變？如果是這樣，你可以添加計數器，每增加一個ngAfterViewChecked就會增加。如果櫃檯達到極限，一切都將得到解決。 – kit

@kit如果我想在檢查每個視圖後執行某些操作，該怎麼辦？這是具有挑戰性的，因爲一切都會觸發一個變化檢測週期，所以我會陷入無限循環。 – Abdel

一種不同的方法只是將*ngIf添加到您的html。

如果要在myModel之前沒有渲染任何東西，請執行類似操作。

<div *ngIf="myModel"> 
    {{myModel.field1}} 
    {{myModel.field2}} 
    {{myModel.field3}} 
</div>

這將檢查是否有任何價值myModel。如果是這樣，那麼它會渲染。

您還可以添加「加載文本」因爲你是通過檢查myModel沒有值，並適當地處理它

<div *ngIf="!myModel"> 
    Fetching Data... 
</div>

來源

2016-09-27 22:37:39 mrcolombo

當我嘗試打印頁面時，有一個數據。但它還沒有渲染/部分渲染，所以我不確定在這種情況下ngIf如何提供幫助。 – Maris

如何等到ng2完成更改DOM

回答

相關問題