Question

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

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

Answer 1

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

将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

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

1 个答案: