Tengo el siguiente javascript y html que me permite hacer clic en un botón para editar texto, ¿cómo lo hago para que funcione con angular2 si hay varios botones?
<button>Button Text Could Be Editable</button><br /> <button (click)="modifyText()" data-edit="0">Edit Button Above</button> <script> function modifyText() { this.previousElementSibling.previousElementSibling.contentEditable = !!(+(this.dataset.edit = this.dataset.edit == 0 ? 1 : 0)) } </script>En angular2, tengo una lista de estudiantes en mi alcance que quiero que se represente en un botón, pero puedo "Editar" su nombre en el botón solo si hago clic en el botón específico.
// this is part of the component this.students = ['John', 'Jacob', 'Patty']; // this is the html in my template for the component <button *ngFor="name of students" (click) = "modifyText()">{{name}}</button><br />¿Cómo modifico la función modifyText() dentro del componente para que en angular2 pueda obtener una referencia al botón específico y hacerlo editable como en mi ejemplo no angular para un solo botón?
Estoy buscando una respuesta usando la última versión de Angular, ya que sé que esto ha cambiado un par de veces.
Puede obtener una referencia al elemento HTML en el que se hizo clic utilizando el objeto $event . La mayoría de las guías le dicen que use la propiedad de target del objeto de evento, pero me gusta usar currentTarget porque:
Siempre hace referencia al elemento al que se ha adjuntado el controlador de eventos, a diferencia de event.target, que identifica el elemento en el que se produjo el evento.
Esto garantiza que obtendré la referencia correcta al elemento HTML en el que estoy escuchando el click . En la plantilla, pase el elemento HTML actual como un parámetro así:
<button *ngFor="name of students" (click)="modifyText($event.currentTarget)">{{name}}</button>y luego recibirlo en el componente así:
public modifyText(htmlElement: HTMLElement) { this.dataset.edit = !this.dataset.edit; htmlElement.contentEditable = this.dataset.edit; htmlElement.focus(); }