新行在Angular 2可编辑div中无法正常工作

时间:2017-09-05 15:05:52

标签: html angular typescript angular2-template

我有一个很有意义的div,直到我将更改后的文本分配回初始变量。在编辑时,我按下回车键,新的行显示在可编辑的div中,但不会存储到' name'中。键入的下一个字符最后在前一行的末尾,光标移到第一行的开头。如果我删除(输入)行,则div表现正常,但是' name'没有更新。如何使div正常运行并更新名称'?

Plunk Demo

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'my-app',
  template: `
    <div style="white-space: pre-wrap;"
         [textContent]=name
         (input)="name=$event.target.textContent" 
      contenteditable>
    </div>
    <div style="white-space: pre-wrap;">{{name}}</div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `TEST`
  }
}

@NgModule({
  imports: [ BrowserModule  ],
  declarations: [ App ],
  bootstrap: [ App ] 
})
export class AppModule {}

预期结果:

Test
Test

实际结果:

estTestT

1 个答案:

答案 0 :(得分:2)

通过一些小改动,你可以让它发挥作用。

  • 将textContent属性更改为innerText
  • ngOnInit中设置innerText值,并放弃ngModel。

<强>打字稿:

@ViewChild('myEditable') private myEditable;
name:string;
constructor() {
  this.name = 'I am editable';
}
ngOnInit(){
  this.myEditable.nativeElement.innerText = this.name;
}

<强> HTML:

<div #myEditable contentEditable (input)="name=$event.target.innerText"></div>
<div style="white-space:pre">{{name}}</div>

Demo