使用angular2向点击事件添加一个动态创建的html元素

我试图添加一个点击事件到一个动态创建的HTML元素，目前代码如下。使用angular2向点击事件添加一个动态创建的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)"那样，它也不适合我。任何想法？

来源

2017-03-23 Ichorville

我会推荐使用* ngFor来创建动态html元素，通过让数组0123'说** list **并更新** list **将创建动态html元素。 –

您可以添加事件侦听器的身体，这将处理该事件对你指定的约束条件，如：

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

注：直接访问DOM是Angular2气馁，它不是一个AOT友好的代码。

来源

2017-03-23 05:19:48 echonax

谢谢你。这完美的作品:) – Ichorville

@Ichorville没问题:-)我仍然想告诉你，如果你可以，你应该创建像JayakrishnanGounder描述的角度的HTML元素。但是，我知道在某些情况下我们不得不使用这种代码。 – echonax

我试图实现一个多搜索选择方案，当我点击其中一个搜索结果时，它显示为选中状态，上面的点击事件是删除选定的选择。由于多个结果是从单独的按钮单击动态添加的，这就是为什么我想使用当前实现。我会尝试你和JayakrishnanGounder提到的。 – Ichorville

你可以这样做如下：

元件面

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

HTML端

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

修改名单会影响你的HTML视图。

希望它有帮助！

来源

2017-03-23 05:35:52

我会试一试！谢谢：） – Ichorville

使用angular2向点击事件添加一个动态创建的html元素

回答

相关问题