Angular2 Selectioningその上にngIfを持つ要素

Question

は私のhtmlです：

<div id="foo" (mouseover)="blah()" *ngIf="isDisplayed"></div> 

そして、私のJS：

isDisplayed: boolean = false 
blah() { 
    this.isDisplayed = true 
    console.log(document.getElementById('foo')) 
} 

はしかし、私にconsole.logは印刷ヌルを行います。 console.logの周りにsetTimeoutを追加すると動作しますが、それはハッキーであり、いくつかのイベントが再生されるときに混乱することになります。つまり、テンプレートのngIfが更新される前にgetElementByIdが実行されるということです。 console.logを実行しているときにテンプレートが更新されることを確認するにはどうすればよいですか？

Answer 1

変更検出を明示的に呼び出すと、AngularはすぐにDOMを更新します。

constructor(private cdRef:ChangeDetectorRef) {} 

isDisplayed: boolean = false 
blah() { 
    this.isDisplayed = true; 
    this.cdRef.detectChanges(); 
    console.log(document.getElementById('foo')); 
}