如何在打字稿中单击表格中的按钮时获取动态表格行数据答案

【问题标题】：how to get dynamic table row data onclick of a button within table in typescript如何在打字稿中单击表格中的按钮时获取动态表格行数据
【发布时间】：2019-10-24 11:16:39
【问题描述】：

我正在使用动态表，每行都有一个按钮，单击按钮时，我需要单击相应行按钮的数据。

我已尝试（单击）事件绑定，但输出未定义。

<table>
<thead> <tr> <th> Name </th> <th> Company </th> </tr> </thead>
<tr *ngFor = "let employee of employees" (click) = "removeEmployee(row)">
            <td> <input type="text" [(ngModel)]= "employee.name"></td>
            <td> <input type="text" [(ngModel)] = "employee.companyName"> </td>
</tr>
</table>

.ts 文件

removeEmployee(tr) {
      console.log(tr);
    }

预期：单击按钮时，应输出表格行数据。

实际：显示未定义。

【问题讨论】：

您应该将员工传递给函数 removeEmployee 而不是行

标签： angular typescript html-table

【解决方案1】：

更改员工行：

<tr *ngFor = "let employee of employees" (click) = "removeEmployee(employee)">

【讨论】：

谢谢，它正在工作。如何获取相应行的rowIndex？

【解决方案2】：

这是你的解决方案

<table>
<thead> <tr> <th> Name </th> <th> Company </th> </tr> </thead>
<tr *ngFor = "let employee of employees" (click) = "removeEmployee(employee)">
            <td> <input type="text" [(ngModel)]= "employee.name"></td>
            <td> <input type="text" [(ngModel)] = "employee.companyName"> </td>
</tr>
</table>

.ts 文件

removeEmployee(tr) {
      console.log(tr);
    }

【讨论】：