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

Posted 2023-03-13

【中文标题】如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定？

【英文标题】：How to achieve 2 way data binding on a div's innerhtml property using ngModel?

【发布时间】：2019-10-12 16:56:47

【问题描述】：

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

代码sn-p：

<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>

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

【问题讨论】：

据我所知，contenteditable 元素不会触发 change 事件，这是 ngModel 双向绑定所依赖的。尝试绑定到input 或keyup 事件。如果你这样做，我建议从它们创建一个 Observable，这样你就可以使用像 debounceTime 和 distinctUntilChanged 这样的运算符来避免发生太多事件。

【参考方案1】：

contenteditable 不是输入，两种方式的绑定适用于输入。

你必须通过input事件更新你的模型，as shown here

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