Question

我的问题是如何使用ElementRef启用动态生成的HTML元素的点击事件。

动态附加的HTML代码。

<ul class="list-group" style="border-radius: 4px;">
    <div class="file_list_event">
    <li class="list-group-item">        
        <button (click)="save_event_btn_app()" class="btn btn-sm btn-danger  delete_file_event pull-right" type="button">
        <i class="fa fa-close"></i> Delete</button>
        </div>
    </li>                   
</ul>

服务调用后动态生成

li。因此，我无法生成click事件，因为它是一个动态生成的元素。

所以，为此我尝试了下面的代码。

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}


  this.elementRef.nativeElement.querySelector('.delete_file_event')
                                .addEventListener('click', this.save_event_btn_app.bind(this)); 
 // Above code I have added just after the append code.

save_event_btn_app(event) {
  console.log(event);
}

但我仍然遇到同样的错误，

ERROR TypeError: Cannot read property 'addEventListener' of null

注意： - 我没有共享动态html生成代码，因为这里没有必要。

Answer 1

您可以通过在添加事件侦听器之前添加el为非null的检查来处理此错误，

let el =  this.elementRef.nativeElement.querySelector('.delete_file_event');
if(el){
  el.addEventListener('click', this.save_event_btn_app.bind(this));
}

但是要了解为什么它为null，您需要添加动态生成代码

单击事件不使用Angular 5中动态生成的元素

1 个答案: