Tengo el siguiente código:
Modelo:
<button *ngFor="name of students" (click)="modifyText($event.currentTarget)">{{name}}</button>Mecanografiado
this.students = ["Carl", "Rob", "Joy]; public modifyText(htmlElement: HTMLElement) { this.dataset.edit = !this.dataset.edit; htmlElement.contentEditable = this.dataset.edit; htmlElement.focus(); }El problema es que, tan pronto como modifico el contenido con contenido editable, parece que pierdo el enlace a {{name}}, como si tuviera un botón separado en la página:
<button (click)="students[0] = 'Amy'">Manual Set Name</button>La matriz de estudiantes cambia, pero cuando miro el texto del botón, es lo que había "editado" en contenteditable, y no muestra a Amy en absoluto.
Le sugiero que use ngModel y Angular puro enlace de datos de dos formas en un componente incrustado:
import {Component, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'editable-button', template: ` <button *ngIf="!editable" (click)="editable = true">{{title}}</button> <input *ngIf="editable" (blur)="editTitle()" [(ngModel)]="title"> `, }) export class EditableButtonComponent { @Input() title: string; @Output() titleChange = new EventEmitter<string>(); editable= false; editTitle() { this.editable = false; this.titleChange.emit(this.title); } }Y luego su plantilla se verá así:
<editable-button *ngFor="let name of students; let index=index" [(title)]="students[index]"></editable-button>Tenga en cuenta que estoy usando el índice del elemento en lugar de su referencia. Aquí puede ver una explicación: https://github.com/angular/angular/issues/10423
Ejemplo de trabajo de Plunker estilizado aquí: https://plnkr.co/edit/eia5PYp3Z5F6WRcWpMeA?p=preview
No estoy seguro de dónde está tu error. Aquí está mi manera simple de escribir este componente.
https://plnkr.co/edit/DpOzFIEeRZ05n64mWnvL
@Component({ selector: 'my-app', template: ` <div> here is value = {{value}} <button [attr.contenteditable]="contenteditable" #el (click)="open(el)" (blur)="close(el)" (keyup.enter)="close(el)">{{value}}</button> </div> `, }) export class App { value ="aaa"; contenteditable = false; constructor() { } open(el) { this.contenteditable = true; setTimeout(()=>el.focus()); } close(el) { this.contenteditable = false; this.value = el.innerText; } }