我希望向用户显示一张图片,其中包含不同数量的 div(取决于检测到的面孔数量),这些图片应该是可点击的(点击一张脸会显示该特定面孔的一些属性)。
理想情况下,我想在每个面孔周围创建一些 div(或按钮),并为每个元素添加类似 (click)="divClicked()"的内容。 但是,(click) 不是合法属性,因此,例如,尝试类似
d3.select('button').attr('(click)','onClickMe()');
报错。 onclick 是一个合法属性,但通过使用它,我认为我应该打破 Angular 希望我工作的方式(因为将函数放在组件的 ts 文件中会给出错误 onClickMe is not defined)。
我能想到的最好的解决方法是为每个 div 分配一个 id,然后执行类似的操作
document.getElementById('b1').onclick=this.onClickMe;
但这感觉像是糟糕的编码。
那么,什么是干净的方法呢?
最佳答案
我认为您应该通过向模板添加一个带有ngFor
的循环来创建div
元素to display your divs .当然,它们可能是 CSS 样式的,基于您事先确定的一些属性(特别是 CSS 属性 left
和 top
在这里很有用)。当然,您也可以向那些 div
添加一个 (click)
事件。
为此,您的组件应包含要显示的对象列表,您可以在必要时更新该列表。此外,它应该提供一种方法,当用户想要查看特定面部的细节时调用该方法。 然后模板只关心将这些对象转换为 HTML 结构并绑定(bind)回调。
结构上类似于以下内容的内容将出现在您的模板中:
<div
*ngFor="let face of faces; index as i"
(click)="showFaceDetails(i)"
[style.left.px]="face.x"
[style.top.px]="face.y"
></div>
关于javascript - 使用 Angular 6 动态创建可点击的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52136991/