作者:胡vidalez | 来源:互联网 | 2022-12-05 20:25
我希望向用户显示一个图像,该图像具有不同数量的div(取决于检测到的脸部数量),该图像应该是可单击的(单击脸部将显示该特定脸部的某些属性)。
因此,理想情况下,我想在每个面孔周围创建一些div(或按钮),并为每个元素添加类似(click)=“ divClicked()”的元素。但是,(click)不是合法属性,因此,例如,尝试类似
d3.select('button').attr('(click)','onClickMe()');
给出一个错误。onclick是一个合法属性,但是我认为通过使用它,我应该打破Angular希望我的工作方式(因为将函数放入组件的ts文件中会导致未定义onClickMe错误)。
我能想到的最好的解决方法是为每个div分配一个ID,然后执行类似的操作
document.getElementById('b1').Onclick=this.onClickMe;
但这感觉像是不好的编码。
那么,这样做的干净方法是什么?
1> Hero Wanders..:
我认为您应该div
通过向ngFor
模板添加循环以显示div来创建元素。当然,它们可能是CSS样式的,具体取决于您事先确定的某些属性(特别是CSS属性left
,top
在这里很有用)。当然,您也可以(click)
向这些div
s 添加-event 。
为此,您的组件应保存要显示的对象列表,您可以在必要时进行更新。此外,它应该提供一种方法,当用户希望查看特定面孔的详细信息时可以调用该方法。然后,模板仅关心将那些对象转换为HTML结构并绑定回调。
在结构上,模板中将发生类似于以下内容的事情: