angular - Renderer2 使用循环将事件绑定(bind)到动态创建的元素

Question

我正在使用 Angular 4+，从“@angular/core”导入 { Component, ElementRef, Renderer2 }；
我已经成功生成了一系列元素:

    const parentList = this.renderer.createElement('ul');
    let children = '';
    for(let i=0; i<totalItem; i++) {
       children += '<li id="item'+i+'">'+item.name+'</li>';
    }
    parentList .innerHTML = children;

    this.renderer.appendChild(
       this.elRef.nativeElement.querySelector('.wrapper'), 
       parentList);

使用 renderer.listen，如何通过迭代将点击事件绑定(bind)到所有创建的 li？
我的尝试:

for(let j=0; j<totalItem; j++) {
   let listener =
     this.renderer.listen(
        this.elRef.nativeElement.querySelector('#item'+j), 
        'click',
        (evt) => {
           this.myFunc(j);
        }
      );
}

.....

myFunc(id) {
   alert(id);
}

问题是每次点击 li 都会在迭代完成后提醒 j 的最新值。
我希望它提醒不同的 id 为每个 li。
我认为我绑定(bind)事件的方式是错误的。请帮助我。

Answer 1

在你的 DOM 被附加到 DOM 树之后，你可以查询所有以 item id 开头的 DOM，同样你可以使用 querySelectorAll 和 [id ^="item"'] 表达式，它表示集合所有具有属性 id 的元素以 item 开头。然后循环遍历每个元素上的集合和绑定(bind)事件。

let listItems = Array.from(this.elRef.nativeElement.querySelectorAll('*[id^="item"]'))

listItems.forEach((listItem, j) => {
    this.renderer.listen(
        listItem, 
        'click',
        (evt) => {
           this.myFunc(j);
        }
    );
})