如何在 fa-icon (angular) 上获得 event.target.id？

Question

不知何故 fa-icon 'swallows' 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>

我想在我的 comopnent.ts 文件中获取 event.target.id：

filterStatus(ev) {

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

  }

所以我的问题是，如果我点击图标，如何获得 event.target.id。（如果我点击 div 内部但图标外部，一切正常）

Answer 1

id 不存在的原因可能是 fa-icon 有一个子 HTML 节点，它是 click 事件的实际 target。

另请注意，页面上只允许一个元素具有唯一的 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)    
}

如何在 fa-icon (angular) 上获得 event.target.id？

How to get event.target.id on fa-icon (angular)?

angular

event-handling

icons

mouseevent