使用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来创建to display your divs元素。当然，它们可能是CSS风格的，基于您事先确定的一些属性（特别是CSS属性left和top在这里很有用）。当然，你也可以向那些(click)s添加一个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>