Событие щелчка, не работающее с динамически генерируемыми элементами в Angular 5

Question

Мой вопрос: как мы можем включить событие щелчка динамически сгенерированного HTML-элемента, используя ElementRef.

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 не равно нулю перед добавлением прослушивателя событий,

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

Однако, чтобы понять, почему оно равно нулю, вам нужно добавить код динамической генерации