在我的 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/