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

Question

我有一个 table，其中我使用 *ngFor 在 Button 标签内迭代了 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。

Answer 1

你不只需要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 以了解该行

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

Retrieve ID of *ngFor elements in a table - Angular

html

angular

typescript

angular-directive

ngfor