我想选择一个动态创建的特定 html 元素。但是创建 html block 的“列表”变量正在填充 http 请求并且不会立即加载。我想通过从 url 获取的 id 选择元素并等于列表项的 id。因此,即使我在 ngAfterViewInit Hook 中选择元素,所选元素也是未定义的。如何选择?
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 */
}
最佳答案
如果您使用 @ViewChildren
引用 HTML 元素,您可以订阅 QueryList.changes
事件,以便在元素出现在 DOM 中时收到通知。
在模板中,设置一个template reference variable在项目元素上:
<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);
...
});
}
参见 this stackblitz一个演示。请注意,如果只包含一个 div
元素,则 ng-container
不是必需的。您可以将 *ngFor
指令直接应用于该元素。
关于javascript - 如何选择在 Angular 中动态加载的 html 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59989788/