html - 如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定(bind)?

标签 html json angular typescript data-binding

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

代码片段:

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

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

问题:

在文本中所做的更改不会反射(reflect)在相应的模型中,即使我们使用 ngModel 进行 2 路数据绑定(bind)也是如此。

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

我在这里做错了什么?你能提出建议吗?

最佳答案

contenteditable 不是输入,双向绑定(bind)适用于输入。

您必须通过input 事件更新您的模型,as shown here

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

关于html - 如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56320588/

相关文章:

jquery - 垂直 Slick slider 的自适应高度

javascript - 仅在向上滚动时固定 CSS 中的布局位置(对齐到顶部)

php - Android phonegap 使用本地 html 和远程 php 登录

javascript - 如何读取视频标签中的所有视频类型

java - 解析 Freemarker 中的 JSON 错误

angular - 如何使用 Entity Effects 扩展 ngrx/data?

angular - 如何将我的自定义 .d.ts 文件添加到我的 Angular 库中?

php - 在 JIT SpaceTree 中加载节点

php - json_encode 是否足够的 XSS 保护?

angular - 如何在angular2中等待用户点击事件?