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

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

因此，理想情况下，我希望在每个面周围创建一些div（或按钮），并为每个元素创建（单击）=“divClicked（）”。 但是，（单击）不是合法属性，因此，例如，尝试以下操作

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

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

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

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

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

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

但这感觉像是糟糕的编码

---

那么，有什么干净的方法可以做到这一点呢？

我认为您应该通过在模板中添加带有

ngFor

的循环来创建

div

元素。当然，它们可能是CSS样式，基于您事先确定的一些属性（特别是CSS属性

left

和

top

在这里很有用）。当然，您也可以向那些

div

添加

（单击）

-事件

为此，您的组件应该包含一个要显示的对象列表，您可以在必要时更新这些对象。此外，它还应该提供一种方法，当用户想要查看特定人脸的细节时，可以调用该方法。 然后，模板只关心将这些对象转换为HTML结构并绑定回调

在结构上，模板中将出现类似于以下内容的内容：

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

你对此有Stackblitz吗？@SiddharthAjmera没有，我的IDE是Visual Studio代码（我的操作系统是Ubuntu）。我的意思是你能在Stackblitz上创建一个复制此问题的示例项目吗？哦稍后如果有必要（因为我需要创建一些假数据，而不是从服务器复制处理json数据的整个代码），但问题本身是关于干净的编码，而不是特定的项目/代码。为什么你不认为

（单击）

是合法的呢？这很有帮助，尽管我必须说，由于我正在构建的页面是响应性的（因此左上方等必须基于与原始图像相关的实际图像形状），我认为使用ngFor设置这些属性是不可行的。（实际上，现在我给它们设置了一个img.onload函数，它本身感觉像是糟糕的编码，但我不确定在前端是否可以进行真正干净的编码：P）