检索 table - Angular 中 *ngFor 元素的 ID

Retrieve ID of *ngFor elements in a table - Angular

我有一个 table,其中我使用 *ngForButton 标签内迭代了 3 个 FA 图标,如图所示。

我已经为 3 个按钮指定了单独的 ID(即 1、2 和 3)以记录单击了哪个按钮。这些按钮是添加、编辑和删除。虽然我通过(单击)事件将它的 ID 发送到组件。每次单击按钮时,该函数都无法检索 ID。它会在随机多次点击后检索 ID,而不是每次单击按钮时。我不明白为什么会这样。

HTML:

<tbody>
    <tr *ngFor="let ABC of XYZ">
      <td>{{ABC.Records}}}</td>
      <td>
           <button id="1" (click)="fun($event)"><fa-icon [icon]="plussquare"></fa-icon></button>
           <button id="2" (click)="fun($event)" ><fa-icon [icon]="editfa"></fa-icon></button>
           <button id="3" (click)="fun($event)" ><fa-icon [icon]="trashfa"></fa-icon></button>
      </td>
    </tr>
</tbody>

.TS:

fun($event:any){
     console.log($event.target.id)
 }

所有添加按钮的 ID 应为 1,编辑按钮的 ID 应为 2,删除按钮的 ID 应为 3。

你不只需要3个方法吗?

 funEdit($event:any, yourVar){
     console.log($event.target.id)
 }
funAdd($event:any, yourVar){
         console.log($event.target.id)
}
funDelete($event:any, yourVar){
         console.log($event.target.id)
}

你会喜欢的:

<button (click)="funAdd($event,ABC)"><fa-icon [icon]="plussquare"></fa-icon></button>
<button (click)="funEdit($event,ABC)" ><fa-icon [icon]="editfa"></fa-icon></button>
<button (click)="funDelete($event,ABC)" ><fa-icon [icon]="trashfa"></fa-icon></button>
 

并在第二个参数中传递您的 ABC var 以了解该行