如何使用ngModel实现div的innerhtml属性的双向数据绑定？

Question

在我的Angular组件ts文件中，我有一个模型，其中一个属性的值是HTML格式的文本。通过在组件的.html文件中设置div的inner html属性，可以在UI中显示文本。通过设置可编辑属性，使div可以进行编辑。

代码片段：

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

这里的 formatJson 返回一个以 HTML 格式化的 JSON 文本。

问题在于：

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

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

我在这里做错了什么吗？您能给出建议吗？

- Nitesh Agrawal

---

据我所知，contenteditable元素不会触发change事件，而ngModel双向绑定依赖于此。尝试绑定到input或keyup事件。如果这样做，我建议从中创建一个Observable，以便您可以使用像debounceTime和distinctUntilChanged这样的操作符来避免获得太多事件。 - Will Alexander

Answer 1

"contenteditable不是一个输入框，双向绑定只适用于输入框。您必须通过事件来更新您的模型，如下所示。"

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

- user4676340

---

解决方案存在的问题是，正如我们在 stackblitz 中所看到的，编辑后光标会返回到开头。这是因为视图是使用来自{{ name }}的新值进行更新的。 - Anthony Brenelière