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变量。这有助于您通过contenteditable方法对toggleContenteditable执行切换效果。

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

同时将toggleContenteditable功能更改为以下。

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

Plunker Demo

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

1 个答案: