时间戳

首页 > 解决方案 > 如何选择在 Angular 中动态加载的 html 元素？

javascript - 如何选择在 Angular 中动态加载的 html 元素？

问题描述

我想选择一个动态创建的特定 html 元素。但是创建 html 块的“list”变量填充了 http 请求并且 dom 没有立即加载。我想通过从 url 获得并等于列表项 id 的 id 选择元素。所以即使我在 ngAfterViewInit 钩子中选择了元素，选定的元素也是未定义的。我该如何选择？

HTML

<div id="wrapper">
    <ng-container *ngFor="let item of list">
        <div [id]="item.id">{{item.content}}</div>
    </ng-container>
</div>

TS

list = null;
selectedItemId = null;

ngOnInit() {
    this.selectedItemId = this.activatedRoute.snapshot.params.id;
}

getList() {
    this.http.get('http://api.example.com').subscribe(
        result => this.list = result
    )
}

ngAfterViewInit() {
    const htmlElement= document.getElementById(this.selectedItemId);

    /* Some codes that using htmlElement variable */
}

标签： javascripthtmlangularhookgetelementbyid

解决方案

如果您使用 引用 HTML 元素@ViewChildren，您可以订阅QueryList.changes事件以在元素出现在 DOM 中时收到通知。

在模板中，在 item 元素上设置模板引用变量：

<div id="wrapper">
  <ng-container *ngFor="let item of list">
    <div #itemElement [id]="item.id">{{item.content}}</div>
  </ng-container>
</div>

在代码中，使用该变量名称来引用以下元素ViewChildren：

@ViewChildren("itemElement") private itemElements: QueryList<ElementRef>;

ngAfterViewInit() {
  this.itemElements.changes.subscribe(() => {
    console.log("Item elements are now in the DOM!", this.itemElements.length);
    const htmlElement = document.getElementById(this.selectedItemId);
    ...
  });
}

请参阅此 stackblitz以获取演示。请注意，如果它只包含一个元素，ng-container则不需要。div您可以将该*ngFor指令直接应用于该元素。

推荐阅读