Javascript 如何以及何时将函数绑定到Angular中的动态html内容？

我有一个组件，我必须将一个函数绑定到每个动态div。我使用过UIkit可排序组件组，在该组中，拖放到特定的div时，它会执行绑定到它的特定代码

例如：我有一个

div

<div id="abc"></div>

在我的例子中，我有动态内容。

div

使用

*ngFor

并使用

.map

函数将函数绑定到它们

要绑定函数，应将html内容加载到DOM中。但是在DOM加载动态内容之前调用该函数。因此，函数没有受到约束。 我在

ngAfterViewInit

中调用了函数，但仍然没有帮助

以下是我的代码：

component.html

<div *ngFor="let batch of batches">
    <div [attr.id]="batch.batchId" uk-sortable="group: sortable-group">
        <div *ngFor="let stud of batch.students">
            <div [attr.id]="stud.id" class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
            </div>
        </div>
    </div>
</div>

---

我认为不建议通过angular动态操作DOM，它会影响您的应用程序性能，为什么您没有为您的用例和功能需求实现想出另一个想法是的，有一些不同的方法来解决我的问题。但是我想知道如何用这种方法解决这个问题。你想使用click事件来绑定到你的div元素吗？

<div *ngFor="let batch of batches">
    <div [attr.id]="batch.batchId" uk-sortable="group: sortable-group">
        <div *ngFor="let stud of batch.students">
            <div [attr.id]="stud.id" class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
            </div>
        </div>
    </div>
</div>

ngOnInit=()=>{
   this.getBatch().then(batch=>{
      this.batches = batch
   });
}

ngAfterViewInit=()=>{
    this.initializeDragChange();
}

initializeDragChange = () => {
  this.batches.map((item) => {
    UIkit.util.on(`${item.batchId}`, "added", (item) => {
       //do something
    });
  });
};