Отправка выбранного элемента в js из списка html

Question

В моем HTML у меня есть список элементов. И метод js вызывается, когда пользователь нажимает на любой из этих элементов. Элементы различаются в зависимости от установленного им класса.

Я пытаюсь отправить выбранный элемент в функцию js, делая нас «this»:

(click)="onClick(my_string, this)"

Но оказывается, что вместо отдельного элемента в списке родительский элемент отправляется.

Как решить эту проблему?

Answer 1

Вы можете передать объект $event и в функции использовать event.target, чтобы получить элемент, из которого инициируется событие. Нет необходимости добавлять onclick к каждому элементу. Вместо этого добавьте его к родителю и делегируйте событие

HTML

<ul (click)="onClick($event)">
  <li class="first"> First Element </li>
  <li class="second"> Second Element </li>
  <li class="third"> Third Element </li>
  <li class="fourth"> Fourth Element </li>
  <li class="fifth"> Fifth Element </li>
</ul>

component.js

onClick(event) {
    console.log(event.target)
  }

Вот полный код

Answer 2

Если вы отправите $event, вы можете получить нажатый элемент

(click)="onClick(my_string, $event)"

На вашем компоненте вы можете получить исходный элемент

onClick(myString, event) {
  let target = event.target || event.srcElement || event.currentTarget;
}