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

我有一个可以理解的div，它很好用，直到我将改变后的文本分配回初始变量。当编辑时，我按下回车键，一个新的行会正确显示在可编辑div中，但不会被存储到'name'中。下一个输入的字符结束于上一行的末尾，并且光标移至第一行的开头。如果我删除（输入）行，该div行为正常，但'名称'不更新。如何让div正确运行并更新'名称'？新行在Angular 2中无法正常工作可编辑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

来源

2017-09-05 rtaft

问题在于，一旦按下'enter'，'name'就会更新控件。我会为'div'编写我自己的值存取器，并使用反应形式模块中的formControl。 –

有了一些你可以把它的工作变化不大。

将textContent属性更改为innerText。
在ngOnInit设置 '模型' 值，在不使用textContent 属性

打字稿：

@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

来源

2017-09-05 20:46:56 Vega

如果您希望放弃'Viewchild'参考，您可以添加一个指令来设置指令ngOnInit上元素的值。有点整洁？ – Vega

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

回答

相关问题