Как получить event.target.id на fa-icon (угловой)? - PullRequest
Новая
       30

Как получить event.target.id на fa-icon (угловой)?

0 голосов
/ 14 октября 2019

Каким-то образом fa-icon 'глотает' event.target.id. У меня в component.html есть следующее: 

 <div id="STATUS_OK" class="unit dropdown-item" (click)="filterStatus($event)" [ngClass]="{ 'unit-selected' : STATUS_OK == true }">
     <input id="STATUS_OK" type="checkbox" name="unit" [(ngModel)]="STATUS_OK">          
     <fa-icon   id="STATUS_OK"  icon="check-circle" [ngStyle]="{'color':'#417505'}"></fa-icon>
     OK
</div>

Я хочу получить event.target.id в моем файле comopnent.ts: 

filterStatus(ev) {

      console.log(ev.target.id) // works for div and input, but doesn't work for fa-icon

  }

Так что мой вопрос: какполучить event.target.id, если я нажму на значок. (Все работает отлично, если я нажимаю внутри div, но за пределами значка)

1 Ответ

1 голос
/ 14 октября 2019

Причина отсутствия id заключается в том, что fa-icon имеет дочерний узел HTML, который является действительным target события click.

Также обратите внимание, что только один элемент настраница может иметь уникальное значение id.

Правильным решением было бы передать STATUS_OK в качестве параметра обратного вызова события.

(click)="filterStatus($event, 'STATUS_OK')"

<div class="unit dropdown-item" (click)="filterStatus($event, 'STATUS_OK')" [ngClass]="{ 'unit-selected' : STATUS_OK == true }">
     <input type="checkbox" name="unit" [(ngModel)]="STATUS_OK">          
     <fa-icon icon="check-circle" [ngStyle]="{'color':'#417505'}"></fa-icon>
     OK
</div>

filterStatus(ev, status) {
    console.log(status)    
}
...