Ng2Table中点击事件失效：删除图标无法触发deletePlan函数

我来帮你搞定这个问题！你遇到的核心问题是：Angular的模板编译器不会处理你通过字符串拼接生成的HTML内容，所以你写在item['deleteOpt']里的(click)='deletePlan(data)'绑定完全没有被Angular识别，自然点击图标时不会触发函数。

正确的解决方案：使用Ng2Table的自定义列模板 #

Ng2Table支持通过自定义模板来渲染列内容，这样Angular能正常编译模板里的指令和事件绑定。具体步骤如下：

1. 修改组件模板（list-plans.html）

在你的ng-table标签下方，添加自定义列的模板，用ng-template并指定模板引用名，同时接收行数据：

<ng-table [config]="config" 
          (tableChanged)="onChangeTable(config)" 
          (cellClicked)="onCellClick($event)" 
          [rows]="rows" 
          [columns]="columns">
  <!-- 自定义删除列的模板 -->
  <ng-template #deleteTemplate let-row="row">
    <i class="material-icons" 
       style="color: red; font-size: 20px; cursor: pointer"
       (click)="deletePlan(row)">
      delete
    </i>
  </ng-template>
</ng-table>

2. 调整columns配置（list-plans.ts）

不需要再给item['deleteOpt']赋值HTML字符串了，而是在你的columns数组里，为删除列指定template属性，值为我们刚才定义的模板引用名deleteTemplate：

// 假设你的columns配置大概是这样，添加或修改删除列的配置
this.columns = [
  // 其他列配置...
  { 
    title: '操作', 
    name: 'deleteOpt', 
    template: 'deleteTemplate' // 指定使用自定义模板
  }
];

3. 确保deletePlan函数能接收行数据

修改你的deletePlan函数，确保它能接收行对象并获取id：

deletePlan(row: any) {
  const planId = row.id;
  // 这里执行你的删除逻辑，比如调用API删除对应id的计划
  console.log('要删除的计划ID：', planId);
}

为什么原来的方法不行？ #

Angular在组件初始化时会编译模板，只有在模板里的内容才会被处理指令绑定。你通过字符串拼接的HTML是在运行时插入的，Angular不会重新编译这部分内容，所以事件绑定、属性绑定等都不会生效。而使用Ng2Table的自定义模板，是让Angular提前编译好模板，再渲染到对应的列中，这样所有绑定都能正常工作。

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