0
137
VisualizaçõesAngular2 obtiene la identificación del elemento en el que se hizo clic
Tengo tal evento de clic
<button (click)="toggle($event)" class="someclass" id="btn1"></button> <button (click)="toggle($event)" class="someclass" id="btn2"></button>Estoy capturando el evento en mi parámetro de entrada de función y quiero saber exactamente en qué botón se hizo clic.
toggle(event) { } pero el event no tiene una propiedad de id .
altKey: false bubbles: true button: 0 buttons: 0 cancelBubble: false cancelable: true clientX: 1198 clientY: 29 ctrlKey: false currentTarget: button#hdrbtn_notificaton.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-button--icon defaultPrevented: false detail: 1 eventPhase: 3 fromElement: null isTrusted: true isTrusted: true layerX: -566 layerY: 5 metaKey: false movementX: 0 movementY: 0 offsetX: 22 offsetY: 13 pageX: 1198 pageY: 29 path: Array[13] relatedTarget: null returnValue: true screenX: 1797 screenY: 148 shiftKey: false sourceCapabilities: InputDeviceCapabilities srcElement: span.mdl-button__ripple-container target: span.mdl-button__ripple-container timeStamp: 1458032708743 toElement: span.mdl-button__ripple-container type: "click" view: Window webkitMovementX: 0 webkitMovementY: 0 which: 1 x: 1198 y: 29 ¿Cómo puedo encontrar una id ?
ACTUALIZACIÓN: Plunkers son todos buenos , pero en mi caso tengo localmente:
event.srcElement.attributes.id - event.currentTarget.id indefinido.currentTarget.id - tiene el valor
Estoy usando la última versión de Chrome 49.0.2623.87 m
¿Podría ser cosa Material Design Lite ? porque lo estoy usando.
3 Respostas
Responde à pergunta0
Si desea tener acceso al atributo id del botón, puede aprovechar la propiedad srcElement del evento:
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: ` <button (click)="onClick($event)" id="test">Click</button> ` }) export class AppComponent { onClick(event) { var target = event.target || event.srcElement || event.currentTarget; var idAttr = target.attributes.id; var value = idAttr.nodeValue; } }Vea este plunkr: https://plnkr.co/edit/QGdou4?p=preview .
Ver esta pregunta:
0
Para usuarios de TypeScript:
toggle(event: Event): void { let elementId: string = (event.target as Element).id; // do something with the id... }0
Podría simplemente pasar un valor estático (o una variable de *ngFor o lo que sea)
<button (click)="toggle(1)" class="someclass"> <button (click)="toggle(2)" class="someclass">