我有一个很有意义的div,直到我将更改后的文本分配回初始变量。在编辑时,我按下回车键,新的行显示在可编辑的div中,但不会存储到' name'中。键入的下一个字符最后在前一行的末尾,光标移到第一行的开头。如果我删除(输入)行,则div表现正常,但是' name'没有更新。如何使div正常运行并更新名称'?
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
答案 0 :(得分:2)
通过一些小改动,你可以让它发挥作用。
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>