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。如果我在 console.log 周围添加一个 setTimeout，它可以工作，但是这很糟糕，并且当多个事件同时发生时会变得一团糟。我的意思是，我确实知道 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'));
}