Angular2选择一个带有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确实打印为null。 如果我在setTimeout周围添加了console.log，那么它会起作用，但是当有几个事件发生时，它会很乱。我的意思是，我确实在模板getElementById更新之前运行了ngIf。运行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'));
}