Saya menggunakan Angular 4 dan saya mencoba untuk mengaktifkan contenteditable="true" / contenteditable="false"

Saya punya ini:

<h1 (dblclick)="edit($event)" contentEditable="true">Double-click Here to edit</h1>

Atau saya juga bisa memiliki kotak centang jika lebih mudah untuk beralih mode edit?

<input type="checkbox" name="" value="" (onchange)="edit($event)">Toggle Edit mode

Dan pada file .ts:

edit(event) {
    // code here needed
  }
1
user8398743 18 Agustus 2017, 00:52

2 jawaban

Jawaban Terbaik

Yang Anda butuhkan adalah sebagai berikut.

HTML

<h4 (dblclick)="contentEditable=true; toto.focus()"
    *ngIf="!contentEditable">
  {{myText}}
</h4>
<input #toto
       autofocus
       *ngIf="contentEditable"
       [value]="myText"
       (keyup.enter)="contentEditable=false; save(toto.value)"
       (blur)="contentEditable=false; save(toto.value)"
       type="text">

TypeScript

myText = "Double-click Here to edit";

Dengan beberapa css Anda dapat memiliki satu di tempat yang lain.

Berikut adalah plunker

0
Double Expresso 18 Agustus 2017, 06:54

Buat pengikatan satu arah dari properti contentEditable ke bidang di Komponen Anda, lalu tambahkan pengikatan peristiwa untuk peristiwa klik di header.

Di komponen Anda, buat boolean:

private isEditable = false;

Kemudian, di html Anda, alihkan nilai boolean ini dengan peristiwa klik, dan ikat properti contentEditable ke boolean ini juga:

<h1 (dblclick)="isEditable = !isEditable" [contentEditable]="isEditable">

Anda juga dapat meletakkan kode pengikatan (dblclick) di dalam metode pada komponen Anda, jika Anda lebih suka memiliki beberapa metode seperti toggleIsEditable(), dengan logika tambahan.

2
LarsMonty 17 Agustus 2017, 22:15