Angular中HTML点击事件传递this为何显示undefined？

在Angular的模板事件绑定中，(click)里的this指向的是组件类实例，而非按钮DOM元素，所以你传递的this并不是预期的按钮元素，才会出现btn is undefined或btn.parentNode is undefined的错误。

方法1：传递事件对象$event获取按钮元素 #

修改模板，把事件对象传给方法：

<button class="fa fa-minus" (click)="deleteRow($event)"></button>

调整组件方法，从事件对象中提取目标元素：

deleteRow(event) {
  // 用currentTarget确保获取到绑定事件的按钮（避免点击按钮内图标时target指向图标）
  const btn = event.currentTarget;
  const row = btn.parentNode.parentNode;
  const name = row.querySelector("td:first-child").textContent;
  const table = document.getElementById("nutrient-table");
  table.deleteRow(row.rowIndex);
};

方法2：使用模板引用变量直接传递按钮元素 #

给按钮添加模板引用变量#btn，直接把DOM元素传给方法：

<button class="fa fa-minus" #btn (click)="deleteRow(btn)"></button>

组件方法可以直接使用传入的按钮元素：

deleteRow(btn) {
  const row = btn.parentNode.parentNode;
  const name = row.querySelector("td:first-child").textContent;
  const table = document.getElementById("nutrient-table");
  table.deleteRow(row.rowIndex);
};

方法3：Angular推荐的数据驱动方式（更优雅） #

避免直接操作DOM，通过维护数据数组来控制表格行：

1. 组件中定义营养数据数组：

nutrients = [
  { name: "Vitamin C", dv1: "", dv2: "2%" },
  // 其他营养项数据...
];

deleteRow(index) {
  // 删除数组中对应索引的项，视图会自动更新
  this.nutrients.splice(index, 1);
}

2. 模板用*ngFor渲染表格行：

<table id="nutrient-table">
  <tr *ngFor="let nutrient of nutrients; let i = index">
    <td>{{ nutrient.name }}</td>
    <td class="dv">{{ nutrient.dv1 }}</td>
    <td class="dv">{{ nutrient.dv2 }}</td>
    <td>
      <button class="fa fa-minus" (click)="deleteRow(i)"></button>
    </td>
  </tr>
</table>

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