Javascript 角度切换内容

我正在使用Angular 4，并尝试切换contenteditable=“true”/contenteditable=“false”

我有这个：

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

---

创建从contentEditable属性到组件中某个字段的单向绑定，然后为标头上的click事件添加事件绑定

在组件中，创建布尔值：

private isEditable = false;

然后，在html中，通过单击事件切换此布尔值，并将

contentEditable

属性也绑定到此布尔值：

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

---

您还可以将

（dblclick）

绑定的代码放在组件上的方法中，如果您希望有一些方法，如

toggleIsEditable（）

，以及其他逻辑。

您需要的是以下内容

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

---

下面是如何在标签中编辑？@Vega，这是一个好主意，但当您双击时，输入为空，并且您键入的内容不会更改。我需要在.ts文件中添加代码吗？非常感谢您的时间在模糊后文本不会更改它不需要保存只是为了在模糊后保留新值我确实更新了plunker以在模糊或enter键后保留值我不确定这是否有效，由于编辑模式是在一次简单的点击中触发的。@Vega它适用于OP的技术要求，但您是对的，必须双击元素以打开编辑模式，然后再次单击以编辑是一种奇怪的行为。当然，所有这些都假设元素只需要是可编辑的，而不是元素的值存储在组件中。如果是这样的话，一个角度更大的方法就是[（ngModel）]。

private isEditable = false;

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

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