时间戳

首页 > 解决方案 > 使用 Angular 6 动态创建可点击的 div

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

问题描述

我希望向用户显示一个图像，其中包含不同数量的 div（取决于检测到的面部数量），应该是可点击的（点击面部将显示该特定面部的一些属性）。

所以理想情况下，我想在每个面周围创建一些 div（或按钮），并为每个元素设置类似 (click)="divClicked()" 的内容。但是，(click) 不是合法属性，因此，例如，尝试类似

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

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

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

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

但这感觉像是糟糕的编码。

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

标签： javascriptangular

解决方案

我认为您应该通过在模板中div添加一个循环来显示您的 divs来创建元素。当然，它们可能是 CSS 样式的，基于您事先确定的一些属性（特别是 CSS 属性，在这里很有用）。当然，您也可以在这些s中添加-event 。ngForlefttop(click)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>

推荐阅读