Question

我正在使用Angular 4 +，import { Component, ElementRef, Renderer2 } from '@angular/core';
我已经成功生成了一系列元素：

    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将点击事件绑定到所有创建的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的最新值。
我希望它为每个{{1 }}。
我认为绑定事件的方式是错误的。请帮助我。

Answer 1

将DOM附加到DOM树之后，您可以查询以item id开头的所有DOM，同样，您也可以将querySelectorAll与[id^="item"']表达式一起使用，其中表示全部收集具有属性id的元素以item开头。 after循环分别遍历每个元素上的collection和bind事件。

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

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

Renderer2将事件绑定到使用循环动态创建的元素

1 个答案: