ngModel 无法使用 contenteditable 处理

标签，并且以 html 作为输入

我正在尝试绑定我的输入，该输入是包含 html 内容的字符串。 app.component.ts 有“内容”变量

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 有以下代码

<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 的 2 路绑定吗？

尝试这样：

template

<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);
  }

demo