Javascript 如何选择以Angular方式动态加载的html元素？

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

HTML

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

---

您可以使用

setTimeout

（http请求完成后，您的代码将被执行，然后您将离开区域并运行检查，并在执行超时后添加元素）：

---

如果使用

@ViewChildren

引用HTML元素，则可以订阅

QueryList.changes

事件，以便在元素出现在DOM中时收到通知

在模板中，在项目元素上设置：

{{item.content}

在代码中，使用该变量名引用具有

ViewChildren

的元素：

@ViewChildren（“itemElement”）私有itemElements:QueryList；
ngAfterViewInit（）{
this.itemElements.changes.subscribe（（）=>{
log（“项元素现在在DOM中！”，this.itemElements.length）；
const htmlElement=document.getElementById（this.selectedItemId）；
...
});
}

---

请参见演示。请注意，如果

ng容器只包含一个
div
元素，则不需要它。您可以将
*ngFor
指令直接应用于该元素。
听起来像是在包装块上添加和
*ngIf=“list”
的作业
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 */
}

this.http.get('http://api.example.com').subscribe(
    result => this.list = result;
    setTimeout(() => console.log(document.getElementById(this.selectedItemId)))
)