如何使用[(ngModel)]对div2的contenteditable在角度2？

我试图使用ngModel来双向绑定div的可输入输入内容如下：

<div id="replyiput" class="btn-input"  [(ngModel)]="replyContent"  contenteditable="true" data-text="type..." style="outline: none;"    ></div>

但它不工作并发生错误

EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''

解决方法

NgModel期望bound元素具有一个value属性,这个div没有.这就是为什么你得到无值访问器错误.

您可以使用textContent属性(而不是值)和输入事件来设置自己的等效属性和事件数据绑定：

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(); }
}

Plunker

我不知道输入事件是否支持所有浏览器,以供内容使用.您可以随时绑定到某些键盘事件.

原文地址：https://www.jb51.cc/css/214521.html