html - Cum să realizezi legătura bidirecțională a datelor pe proprietatea innerhtml a unui div folosind ngModel?

În fișierul meu ts al componentului Angular am un model, cu o proprietate a cărei valoare este text formatat HTML. Textul este afișat în interfața utilizatorului folosind proprietatea inner HTML a unui div din fișierul .html al componentului meu. Div-ul este făcut editabil prin setarea proprietății editable.

Fragment de cod :

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

Aici formatJson returnează textul JSON formatat în HTML.

Problema :

Modificările făcute în text nu se reflectă în modelul corespunzător, chiar dacă avem legare bidirecțională a datelor folosind ngModel.

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

Ce fac greșit aici? Ai putea să sugerezi, te rog.

Răspuns #1

`contenteditable` nu este un input, iar legarea bidirecțională funcționează pe inputuri.

Trebuie să actualizezi modelul tău prin evenimente input, așa cum este arătat aici

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