angular - 如何在 Angular 2 中切换 contenteditable 元素 true 或 false

Question

通过按钮调用将 contenteditable 元素切换为 true 以编辑元素文本，并在模糊时将 contenteditable 元素切换为 false 完成编辑!

如何在类里面设置contenteditable为false!

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `

    <h2 #el contenteditable="false" (blur)="text=el.textContent">
       This Content is Editable
    </h2>

    <button (click)="toggleContenteditable()">Edit Text Content</button>

    <hr/>
    <p> Text Obj: {{text}}</p>
  `
})
export class App {

  text : string;
  contenteditable:bool = false;

  toggleContenteditable(){
    this.contenteditable = !this.contenteditable;
  }

}

Answer 1

您应该在 contenteditable 之前使用带有 attr. 前缀的属性绑定(bind)，然后在其中传递 contenteditable 变量。这将帮助您通过 toggleContenteditable 方法对 contenteditable 执行切换效果。

<h2 #el [attr.contenteditable]="contenteditable" (blur)="text=el.textContent">

同时将 toggleContenteditable 函数更改为以下内容。

toggleContenteditable(){
    this.contenteditable = !this.contenteditable; //`this.` was missing in later assignment
}

Plunker Demo