如何使用 ngModel 在 div 的内部 html 属性上实现 2 向数据绑定？

Question

在我的Angular组件TS文件中，我有一个模型，其中一个属性为HTML格式的文本。该文本使用我组件的.html文件中DIV的内部HTML属性显示在UI中。DIV是通过设置可编辑的属性来编辑的。

代码段：

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

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

问题：

文本中所做的更改并未反映在相应的模型中，即使我们使用ngmodel具有2种方法数据绑定。

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

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

Answer 1

contenteditable不是输入，而双向绑定在输入上起作用。

您必须通过input事件更新模型，如下所示

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