使用angular2将click事件添加到动态创建的html元素中

Question

我试图将click事件添加到动态创建的html元素中，目前代码如下。

let parameterLabels = document.getElementById('parameterLabels');

    p_meter.classList.add('active', 'filtered');
    parameterLabels.innerHTML += `
        <a id="label_${parameter.name}" class="ui label transition animating scale in" 
            data-value=${parameter.name}>${parameter.name}<i id="remove_${parameter.name}" class="delete icon"></i></a>`;

    document.getElementById(`remove_${parameter.name}`).addEventListener('click', () => {
        this.removeParameter(`${parameter.name}`);
    });

目前我通过addEventListener分配click事件，但它仅对创建的元素有效。 如果我继续创建新的动态元素，则只有最新的单击事件才能生效，但不会生成以前创建的元素的单击事件。 有没有办法在html本身中绑定click事件，如angular2 (click)="removeParameter($event)" ，这对我来说也不起作用。 任何想法？

Answer 1

您可以向正文添加一个事件侦听器，它将处理指定约束的事件，如：

document.querySelector('body').addEventListener('click', (event)=> {
    if (event.target.id.toLowerCase() == `remove_${parameter.name}`) {
        this.removeParameter(`${parameter.name}`);
    }
});

注意：在Angular2中不鼓励直接访问DOM，它不是一个友好的代码。

Answer 2

您可以执行以下操作：

组件侧

list: Array<model> = new Array<model>();

Html Side

<div *ngFor="let item of list">
    //your html code//                               
</div>

修改列表将影响您的html视图。

希望能帮助到你！！