Angular 7 - Как найти значение атрибута элемента в компоненте

Question

У меня есть компонент, и у меня есть следующие элементы в компоненте html, и для щелчка по нему нужен идентификатор элемента. Пример: при нажатии на элемент

с идентификатором "l1" я должен получить l1 внутри клика.

<div class="col-md-6 col-xl-6 col-sm-6">
    <ul>
      <li id = "l1">name1</li>
      <li id = "l2">name2</li>
      <li id = "l3">name3</li>
      <li id = "l4">name4</li>
    </ul>
</div>

Я пытаюсь прочитать идентификатор каждого

элемента в событии onClick, используя @Viewchild в классе, но в console.log () нет значения;

 @ViewChild('li', {read: ViewContainerRef}) showAllData;

 @HostListener("click") onClick(){
      console.log( $(this.showAllData.nativeElement).attr('id'));
 }

Answer 1

Попробуй вот так. Следующий код будет регистрировать идентификатор тега li в консоли каждый раз, когда пользователь нажимает тег li. Надеюсь, это то, что вы ищете.

@HostListener("click" , ['$event.target']) onClick(li) {
    console.log(li.id);
}