如何在ionic 2 angular 2中获取点击事件按钮的id和name值答案

【问题标题】：How to get id and name value of button on click event in ionic 2 angular 2如何在ionic 2 angular 2中获取点击事件按钮的id和name值
【发布时间】：2017-10-28 17:42:00
【问题描述】：

我有一个按钮

<button ion-button icon-left name="0x10000011 (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

当我点击它时，我想在我的服务sendNotify 函数中获取id 属性。

public sendNotify(data) {
  var method = 'SCAN_BUTTON';
  var name = data.target.name;
  var id = data.target.id;
  var value = data.target.value - 0;
  console.log("#$#$%$%^$%^#$%^#$%",method, name, value);
}

这里我没有得到按钮 id 和 name。而是

#$#$%$%^$%^#$%^#$% SCAN_BUTTON undefined NaN.

谁能帮我找出我的错误？

【问题讨论】：

为什么不直接将您的姓名/ID 作为函数的参数发送？
检查我的答案

标签： javascript angular ionic-framework ionic2

【解决方案1】：

您正在考虑将离子组件 ion-button 作为基本的 html button 标记。

它实际上是一个角度组件。检查here。

它的内部 html 看起来像：

<span class="button-inner">
  <ng-content></ng-content>
</span>
<div class="button-effect"></div>

根据你点击按钮的位置，它会发送标签的ID和事件名称。点击区域可以是button标签或span。

您应该简单地将值作为参数发送。

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event,'0x10000011','0x10000011')" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

A plunker to try

【讨论】：

【解决方案2】：

您的代码总体上看起来不错，我还建议使用目标而不是 srcElement。

在您的代码中，您只是错过了关闭名称属性，请尝试将其更改为：

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

我希望这能解决您的问题。

【讨论】：

感谢您的快速回答。这是我的错字，它不起作用
如果还是不行，能否提供一个Plunker？
我正在使用 ionic 我如何为此创建一个 plunker？
当然，你可以使用this starter，但可能你应该升级nsystemjs.config.js中的依赖版本。

【解决方案3】：

您可以使用以下代码获取值

<button id="ar" name="some" (click)="clicked($event)"> CLICK ME </button>


clicked(event){
    console.log(event.srcElement.id)
    console.log(event.srcElement.name)

  }

LIVE DEMO

【讨论】：

我尝试使用 secElement，但得到的结果与以前相同。是因为离子吗？
你将什么作为参数传递给方法$event？
@Araving 与我在 Angular 2 Web 应用程序中使用的代码相同，它在那里工作。那里的事件带有按钮 ID 名称和值。它在杜松子酒离子应用程序中不起作用。
Not "secElement" 按照@Aravind 的建议尝试 "srcElement"。那应该行得通。如果不尝试安慰您从传递的参数中获得的值并在您的问题中更新它，以便人们可以轻松帮助您解决问题
对我来说，我不得不使用 event.srcElement.attributes.name.nodeValue