如何解决检索表中* ngFor元素的ID-Angular
我有一张桌子,其中我使用Button
在*ngFor
标签内迭代了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变量以了解该行
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。