如何在TypeScript中从事件中获取Ionic复选框的ID？

嘿，这问题我熟，给你两种靠谱的解决办法，都不用Ajax，放心用！

方法一：通过事件对象直接访问DOM元素ID #

你已经注意到事件对象里有elementRef，其实只要顺着层级往下访问就能拿到ID啦。修改你的TypeScript代码：

onTap(e) {
  console.log(e);
  console.log(e.checked);
  // 获取复选框ID
  const checkboxId = e.target.elementRef.nativeElement.id;
  console.log('复选框ID:', checkboxId);
}

简单解释下：

• e.target指向的是触发事件的<ion-checkbox>组件实例
• 组件的elementRef属性保存了对原生DOM元素的引用
• nativeElement就是实际渲染到页面上的DOM节点，从中就能直接获取id属性

方法二：直接在模板中传递ID参数（更推荐） #

这种方式不用依赖DOM结构，代码更直观也更稳定，后续Ionic组件更新也不容易出问题。

先修改HTML模板，把ID作为第二个参数传给onTap函数：

<ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event, '1on')"></ion-checkbox>

然后更新TypeScript代码，接收这个ID参数：

onTap(e, checkboxId) {
  console.log(e);
  console.log(e.checked);
  console.log('复选框ID:', checkboxId);
}

这样直接就能拿到ID，是不是更简单？

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