ngModel在< div>上不起作用使用contenteditable标记，并将html作为输入 [英] ngModel is not working on <div> tag using contenteditable and have html as an input

问题描述

我试图绑定我的输入，它是其中包含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屋！