如何在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

你应该使用带有attr.前缀的属性绑定,contenteditable然后contenteditable在那里传递变量.这有助于您对contenteditablevia toggleContenteditable方法执行切换效果.

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

也将toggleContenteditable功能改为以下.

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

Plunker演示