首页 文章

使用ngIf时无法找到div

提问于
浏览 次
1

如果我尝试选择ngIf指令中存在的DOM元素，则该元素为null . 如果我删除ngIf，那么我可以选择它 .

ngAfterViewInit() {
  const outer = document.getElementById('external-events');
  console.log(outer);
}

组件模板中的代码，未找到div：

<div *ngIf="groupedPatchGroups">
  <div id="external-events">
      stuff here
  </div>
  

</div>

带走* ngIf和外部报告div的内容 .

在数据返回之前运行ngAfterViewInit以确定ngIf会发生什么？我希望ngIf首先运行，ngAfterViewInit是最后运行的东西 .

注意：groupedPatchGroups值在ngOnInit中设置 .

javascript angular angular6

1 回答

  • 1

    访问新创建的元素的一种方法是在 div 上设置template reference variable：

    <div *ngIf="groupedPatchGroups">
  <div #externalEvents>
      stuff here
  </div>
  
    
</div>

    并订阅 ngAfterViewInit 中的 QueryList.changes 事件 . 您还可以在订阅之前检查元素是否已存在于DOM中 .

    @ViewChildren("externalEvents") externalEvents: QueryList<ElementRef>;

ngAfterViewInit() {
  console.log("Before changes", this.externalEvents.first); // Maybe already present
  this.externalEvents.changes.subscribe((elements) => {
    // Do something with elements or with this.externalEvents
    let element = this.externalEvents.first;
    console.log("Changes detected", element);
    ...
  }
}

    有关演示，请参阅this stackblitz .

    回复于

相关问题