Angular 10.1.6：如何将点击按钮的ID作为函数参数传递？

嘿，我明白你的问题了——在Angular模板里用this.id是踩了个常见的小坑！

为什么你的写法不生效？ #

Angular模板中的this指向的是组件类的实例，而不是触发点击事件的DOM元素。所以this.id会试图去你的组件类里找名为id的属性，而不是你设置在<span>上的DOM元素ID，自然拿不到正确的值。

两种简单的解决方案 #

方案1：直接传递原始数据（推荐）

既然你的按钮ID本身就是prov.provname，完全不需要从DOM元素里去取，直接把这个变量作为参数传给函数就好，这更符合Angular的数据流逻辑：

<span class="nav-link btn btn-white btn-animate" id="{{prov.provname}}" (click)="getProvCustomers(prov.provname)">
  {{prov.provname}}
</span>

方案2：通过事件对象获取DOM元素ID

如果你的场景必须从DOM元素本身获取ID（比如ID是动态生成的其他值），可以利用Angular事件绑定中的$event对象，通过currentTarget拿到绑定事件的元素（注意用currentTarget而不是target，避免子元素触发事件时拿到错误的元素）：

<span class="nav-link btn btn-white btn-animate" id="{{prov.provname}}" (click)="getProvCustomers($event.currentTarget.id)">
  {{prov.provname}}
</span>

小提示 #

优先用方案1，因为直接使用组件中的数据比从DOM反向读取更可靠，也更容易维护——毕竟DOM应该是数据的渲染结果，而不是数据的来源~

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