如何使用ngModel在div的innerhtml属性上实现2种方式的数据绑定？

Question

在我的角度分量ts文件中，我有一个模型，其属性为html格式的文本。 文本使用组件的.html文件中div的inner html属性显示在UI中。 通过设置editable属性使div可编辑。

代码段：

<div id="requestBody" contenteditable="true" 
*ngIf="selectedReqTab==='reqBody'" [innerHTML]="formatJson(requestBody)"></div>

在这里formatJson返回html格式的JSON文本。

问题：

即使我们使用ngModel进行2种方式的数据绑定，文本中所做的更改也不会反映在相应的模型中。

<div id="requestBody" contenteditable="true" 
*ngIf="selectedReqTab==='reqBody'" [(ngModel)]=”requestBody” 
[innerHTML]="formatJson(requestBody)"></div>

我在这里做错了什么？你能建议吗？

Answer 1

contenteditable不是输入，并且两种方式对输入进行绑定。

您必须通过input个事件as shown here

更新模型

<p (input)="updateModel(model.innerText)" #model contenteditable>{{ name }}</p>