Angular2 - 单击事件 : get ID of clicked element

标签 angular click primeng

我对图表 (primeng) 有一个概览,现在我需要知道是否可以在单击图表时从图表中获取 ID。

仅供引用,我有一个包含“在新选项卡中打开”的上下文菜单,我需要打开上下文菜单的图表中的 ID。

右键单击 -> 从图表中获取 ID -> 使用 ID 打开新选项卡,只显示该图表。

我见过 event.target.attributes.id/event.currtarget 之类的东西,但那是 js,对吗?我正在使用 typescript 。

所以问题其实很简单:我怎样才能做到这一点?

我是编程相关一切的新手,我几周前刚开始,所以请耐心等待,因为我可能无法像其他人一样快速理解一切。

编辑:

上下文菜单的菜单项:

this.ctitems = [
    {
        label: 'Öffnen(neuer Tab)',
        icon: 'fa-plus',
        command: (onClick) => {this.function()}                
    },
    {
        label: 'Öffnen(dieser Tab)',
        icon: 'fa-hand-o-down'

    }
]; 

获取id的函数

function() { event.target.getID <- problem }

一旦有了 ID,我就想将 ID 指定的项目推送到 TabMenu 中显示的项目数组中。但那是 future 。现在我只需要获取 ID。

HTML:

<p-chart height="100" width="100" class="ui-g-2 " type="line" id="linechart" [data]="ntwdata"></p-chart>
<p-contextMenu id="cm" [model]="ctitems"></p-contextMenu>

最佳答案

您没有将 event 变量传递给您的函数,因此您不能使用它。

像这样定义你的命令,然后它应该工作:

this.ctitems = [
    {
        label: 'Öffnen(neuer Tab)',
        icon: 'fa-plus',
        command: (event) => onClick(event)                
    },
    {
        label: 'Öffnen(dieser Tab)',
        icon: 'fa-hand-o-down'

    }
];

[...]

onClick(event) {
    let target = event.target || event.srcElement || event.currentTarget;
    let idAttr = target.attributes.id;
    let id = idAttr.nodeValue;
    console.log(id);
}

关于Angular2 - 单击事件 : get ID of clicked element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37830898/

相关文章:

javascript - 刷新后保留页面中的数据

Angular 2/RXJS - 需要一些帮助来处理请求

angular - Angular Bootstrap 数组

javascript - 如何为元素调用 click()?

Angular 6 如何将 PrimeNG 全局过滤器移到 <p-table> 之外?

angular - 如何区分何时通过模板或路由加载 Angular 组件?

javascript - 使用 JS 更改 Meteor 中的按钮文本

JavaScript - 点击图片

angular - 如何在primeng的<p-autocomplete>标签中设置默认值

angular - PrimeNg ui-float-label 在 react 形式 patchValue() 后不 float