如何在离子 2 角度 2 中获取点击事件按钮的 id 和名称值

Question

我有一个按钮

<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.

谁能帮我找到我的错误？

Answer 1

您正在考虑将离子组分离子按钮作为基本的 html button标签。

它实际上是一个角度组件。查看此处。

它的内部 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>

一个可以尝试的笨蛋

Answer 2

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

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

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

现场演示

Answer 3

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

在您的代码中，您只是错过了关闭 name 属性，请尝试将其更改为以下内容：

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

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