如何在angular2中使用[(ngModel)] div的contenteditable? [英] How to use [(ngModel)] on div's contenteditable in angular2?
问题描述
我正在尝试使用ngModel双向绑定div的可信输入内容,如下所示:
I am trying to use ngModel to two way bind div's contenteditable input content as follows:
<div id="replyiput" class="btn-input" [(ngModel)]="replyContent" contenteditable="true" data-text="type..." style="outline: none;" ></div>
但它不起作用且发生错误:
but it is not working and an error occurs:
EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''
推荐答案
NgModel
期望绑定元素具有值
属性, div
s没有。这就是为什么你得到无值访问者
错误。
NgModel
expects the bound element to have a value
property, which div
s don't have. That's why you get the No value accessor
error.
你可以使用你自己设置等价的属性和事件数据绑定 textContent
属性(而不是 value
)和输入
事件:
You can set up your own equivalent property and event databinding using the textContent
property (instead of value
) and the input
event:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `{{title}}
<div contenteditable="true"
[textContent]="model" (input)="model=$event.target.textContent"></div>
<p>{{model}}`
})
export class AppComponent {
title = 'Angular 2 RC.4';
model = 'some text';
constructor() { console.clear(); }
}
我不知道是否输入所有浏览器都支持code>事件
contenteditable
。您总是可以绑定到某些键盘事件。
I don't know if the input
event is supported on all browsers for contenteditable
. You could always bind to some keyboard event instead.
这篇关于如何在angular2中使用[(ngModel)] div的contenteditable?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!