Angular 4中表格行click事件绑定失败如何处理

问题根因 #

点击事件失效的核心原因是[innerHTML]渲染导致的DOM结构异常：

1. 若item.Tab内包含完整的<tr>标签，会生成<tr>嵌套<tr>的非法结构，浏览器会自动纠错拆分DOM，你实际点击的行并不是绑定了(click)事件的那个<tr>
2. 若[innerHTML]插入的内容不符合表格元素嵌套规范，也会导致绑定了事件的<tr>不在点击路径上，触发不了回调

解决方案 #

• 最推荐方案：移除[innerHTML]，把单元格结构直接写在模板中
  如果item.Tab存储的是行内单元格内容，直接拆解属性渲染即可保证事件绑定正常生效：

<tr *ngFor="let item of TabItems" (click)="displayTable(item)">
  <!-- 根据实际业务写对应单元格，示例如下 -->
  <td>{{item.column1}}</td>
  <td>{{item.column2}}</td>
</tr>

• 方案二：规范[innerHTML]的插入内容
  如果确实需要动态渲染单元格内容，确保item.Tab内只包含<td>相关代码，不要出现外层的<tr>标签，保证DOM结构符合规范，绑定的点击事件即可正常触发。
• 方案三：使用事件委托适配全动态行结构
  如果业务必须插入包含完整<tr>的动态HTML，直接把所有行内容插入到<tbody>上，给<tbody>绑定点击事件通过冒泡捕获行点击：
  模板代码：

<tbody (click)="handleTbodyClick($event)" [innerHTML]="fullTableRowsHtml"></tbody>

组件内通过$event.target匹配点击的行，获取对应数据触发逻辑即可。

• 排查点：确认组件类中已经正确声明displayTable方法，不存在拼写、入参不匹配的问题。

内容的提问来源于stack exchange，提问作者Audumbar