Почему $event.target ячейка, а не строка?

Question

[mantovpinets]

Всем доброго времени суток.

Юзаю Angular 4. Мне нужно повесить обработчик событий на клик по строке таблицы. Пишу следующим образом:

<tbody>
    <tr data-id="{{course.id}}" *ngFor="let course of coursesList" data-open="false" (click)="showListOfListners($event)">
          <td>{{course.Number}}</td>
          <td>{{course.name}}</td>
          <td>{{course.Start | date: "dd.MM.yy"}}</td>
          <td>{{course.Finish | date: "dd.MM.yy"}}</td>
    </tr>
</tbody>

Но когда начинаю писать обработчик событий, то у меня по клику на строку в $event.target находится ячейка, по которой кликнули, а не сама строка.

showListOfListners(event:any): void {
		console.log(event.target);
		console.log(event);
		this.test.nativeElement.insertAdjacentHTML("beforeend", '<div>two</div>');	
	}

Как пофиксить этот косяк?

Answer 1

[Demian Smith]

target - это тот компонент, который породил событие "клик". Если вам нужно знать какой компонент его поймал, то юзайте event.currentTarget. В вашем случае это будет строка.

Но в любом случае код выглядит так, будто его писал человек, одержимый бесом jQuery.

Вот так бы выглядел код, если бы его писал нерадивый angular программист, забывший про jQuery навсегда:
(в любом случае это лучше, чем пример в тексте вопроса, так как он не нуждается в каких-то дополнительных выкрутасах в контроллере и изменения дома не будут неожиданно потеряны в случае перерисовки компонента самим ангуляром по событию, не зависящиму от вас)

<tbody>
  <ng-container *ngFor="let course of coursesList">
    <tr  (click)="course.isOpened != course.isOpened">
          <td>{{course.Number}}</td>
          <td>{{course.name}}</td>
          <td>{{course.Start | date: "dd.MM.yy"}}</td>
          <td>{{course.Finish | date: "dd.MM.yy"}}</td>
    </tr>
    <tr *ngIf="course.isOpened">
       <td colspan="4">Here we go</td>
    </tr>
  </ng-container>
</tbody>

Нерадивый, потому что тут мутируется объект курса, что не есть хорошо.

Comments

[mantovpinets]

Demian Smith, ну это пока мой первый проект на angular 4, поэтому ещё всех техник не знаю. Да, ваш вариант мне больше нравится. Спасибо.

[Demian Smith]

mantovpinets, серьёзно, это единственно правильный путь в анугяре. Если у вас появилась необходимость получать html элемент из дома, менять его напрямую или присваивать ему события, то можете быть уверены, что это неверный путь, гарантированно приводящий к неожиданному поведению приложения.

В буржуй-нете есть даже такое понятие angular-way. Это, так сказать, ангуляровский способ мышления, в котором данные определяют html, а не наоборот. Нужно немного попотеть чтоб понять как это всё устроено, но ваши старания будут вознаграждены. Для начала перестаньте использовать data-атрибуты. Это привычка из jquery и она не работает с ангуляром. Вообще никогда. Я уже 3 года на ангуляре. 2 года на первом и год на втором (четвёртом) и это ни разу не нужно было. Разве что в первую неделю работы я их пытался ввернуть, пока мне по рукам не надавали.

Удачи в освоении!

[mantovpinets]

Demian Smith, спасибо, что надавали по рукам мне вы, а не мой начальник. :)

[Demian Smith]

mantovpinets, та до начальника это бы не дошло, скорее всего. Вы бы сами очень быстро обратили внимание на неожиданно пропадающие элементы.

Answer 2

[Mikhail Osher]

Это не косяк. Читайте документацию.
По идее, Вы можете написать следующий код: (click)="showListOfListners(course), и уже работать с конкретным объектом Course.

// EDIT: неправильно понял вопрос

Тогда надо проверить следующее условие: если target не является элементом tr, тогда вызвать target.closest('tr').
Почему попадает ячейка в event.target? Так работает событийная модель DOM. Подробнее можете прочитать в интернете (например, тут).

Comments

[mantovpinets]

дело в том, что мне нужен не объект, а сам Dom элемент, чтобы потом проводить dom-манипуляции

[Mikhail Osher]

mantovpinets, ах, неправильно понял вопрос.

[Demian Smith]

mantovpinets,
> дело в том, что мне нужен не объект, а сам Dom элемент, чтобы потом проводить dom-манипуляции

это очень плохая идея. Вы пользуетесь ангуляром как раз для того чтоб не проводить никаких dom-манипуляций вручную. Ангуляр сам перерисовывает компоненты по разным событиям. Если вы руками меняете дом, то вы потеряете свои изменения дома как только сработает таймер или выполнится http-запрос.