HTML

Question

我正在使用Angular 4而我正试图切换contenteditable =＆＃34; true＆＃34; / contenteditable =＆＃34; false＆＃34;

我有这个：

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

或者如果更容易切换编辑模式，我也可以使用复选框？

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

并在.ts文件中：

edit(event) {
    // code here needed
  }

Answer 1

创建从contentEditable属性到Component中的字段的单向绑定，然后为标题上的click事件添加事件绑定。

在您的组件中，创建一个布尔值：

private isEditable = false;

然后，在你的html中，用click事件切换这个boolean的值，并将contentEditable属性绑定到这个boolean：

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

您还可以将(dblclick)绑定的代码放在组件的方法中，如果您更喜欢使用toggleIsEditable()等方法，并附加逻辑。

Answer 2

您需要的是以下内容。

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

打字稿

myText = "Double-click Here to edit";

有了一些css，你就可以用一个css代替另一个。

以下是plunker

角度 - 切换内容

2 个答案:

HTML

打字稿