使用Angular 6动态创建可点击的div

Question

我希望向用户显示一个图像，该图像具有不同数量的div（取决于检测到的脸部数量），该图像应该是可单击的（单击脸部将显示该特定脸部的某些属性）。

因此，理想情况下，我想在每个面孔周围创建一些div（或按钮），并为每个元素添加类似（click）=“ divClicked（）”的元素。但是，（click）不是合法属性，因此，例如，尝试类似

d3.select('button').attr('(click)','onClickMe()');

给出一个错误。onclick是一个合法属性，但是我认为通过使用它，我应该打破Angular希望我的工作方式（因为将函数放入组件的ts文件中会导致未定义onClickMe错误）。

我能想到的最好的解决方法是为每个div分配一个ID，然后执行类似的操作

document.getElementById('b1').onclick=this.onClickMe;

但这感觉像是不好的编码。

那么，这样做的干净方法是什么？

Answer 1

我认为您应该div通过向ngFor模板添加循环以显示div来创建元素。当然，它们可能是CSS样式的，具体取决于您事先确定的某些属性（特别是CSS属性left，top在这里很有用）。当然，您也可以(click)向这些divs 添加-event 。

为此，您的组件应保存要显示的对象列表，您可以在必要时进行更新。此外，它应该提供一种方法，当用户希望查看特定面孔的详细信息时可以调用该方法。然后，模板仅关心将那些对象转换为HTML结构并绑定回调。

在结构上，模板中将发生类似于以下内容的事情：

<div
    *ngFor="let face of faces; index as i"
    (click)="showFaceDetails(i)"
    [style.left.px]="face.x"
    [style.top.px]="face.y"
></div>