ng2でDOMの変更が完了するまでの待ち時間

Question

私のweb-appには印刷機能があります。私はjqueryの印刷プラグインを使用して印刷プレビューで表示するためにいくつかの要素domのみです。すべてのデータがレンダリングされたときにのみ印刷を開始するようにしたい。 現在の実装では、印刷プレビューがdomのすべての情報ではなく表示されることがあります（ng2が何らかの遅延操作を使用すると思います）。

はサンプルを見てみましょう：

@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が調整されるまで待つより堅固なアプローチがありますか？

Answer 1

チェックアウトngAfterViewCheckedはdocsで、おそらくあなたが探しているものです。

Answer 2

別のアプローチでは、あなたのhtmlに*ngIfを追加するだけです。

値がmyModelになるまで何も表示しない場合は、次のようにします。

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

myModelに値があるかどうかを確認します。そうであれば、レンダリングされます。

あなたはmyModelに値がないかどうかをチェックし、私はそれがngAfterViewCheckedを使用しようとしました適切

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