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')); 
}