ngModel在< div>上不起作用使用contenteditable标记,并将html作为输入 [英] ngModel is not working on <div> tag using contenteditable and have html as an input
本文介绍了ngModel在< div>上不起作用使用contenteditable标记,并将html作为输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图绑定我的输入,它是其中包含html内容的字符串.app.component.ts具有内容"变量
I am trying to bind my input, which is string having html content in it. app.component.ts has 'content' variable
content : string = "<p>This is my editable data.</p><p>Two way binding is not getting applied on it.</p>
public validateProfile(content){
console.log(content);
}
app.component.html具有以下代码
app.component.html has following code
<div contentEditable="true" [innerHTML]="content" [(ngModel)]="content"></div>
<button type="submit" class="btn btn-info" (click)="validateProfile(content)">Validate Profile</button>
我可以编辑标记内的内容.由于我的输入是字符串格式的html数据,因此无法将其绑定到输入标签.有人可以建议在div或span上如何应用与contenteditable = true的两种方式绑定.
I am able to edit the content inside tag. As my input is html data in string format , I can't bind it to input tag. Can someone please suggest how to apply 2 way binding with contenteditable= true on div or span.
推荐答案
尝试这样:
模板
<div contenteditable="true" [innerHTML]="content" (input)="contentNew=$event.target.textContent"></div>
<br/>
<button type="submit" class="btn btn-info" (click)="validateProfile(contentNew)">Validate Profile</button>
打字稿
contentNew: string;
content : string = "<p>This is my editable data.</p><p>Two way binding is not getting applied on it.</p>";
public validateProfile(content){
this.contentNew = content;
console.log(content);
}
这篇关于ngModel在< div>上不起作用使用contenteditable标记,并将html作为输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文