Блог

Я вставляю данные из QUILL text editor , которые хранятся в формате HTML. Когда я обращаюсь к данным, чтобы показать где-то, что они показывают так же, как HTML, мне нужно, чтобы они отображались как обычный текст.

<div class="card p-3 mb-3" [innerHTML]="mcq.question ">

JSON из базы данных:

 0:
answer: "amp;<p>mcq-1 Aamp;</p>"
question: "amp;<p>mcq-1tQamp;</p>"
 

Первое, что приходит на ум, это то, что HTML просто недействителен. Вы уверены, что он правильно отформатирован?

Другая возможность: вы пробовали пометить HTML как безопасный с помощью DomSanitizer? В зависимости от типа используемых тегов Angular может остановить его отрисовку, чтобы предотвратить атаки XSS.

Примечание: делайте это только тогда, когда вы на 100% уверены, что HTML безопасен.

Эта функция выполнит всю работу:

 function decodeSpecialEntitiesHtml(html) {
  const str = document.createElement("textarea");
  str.innerHTML = html;
  return str.value;
}

var html = 'amp;<p>mcq-1 Aamp;</p>'

document.getElementById('withoutFunction').innerText = html;
document.getElementById('withFunction').innerText = decodeSpecialEntitiesHtml(html); 

 <label>without func:</label><div id="withoutFunction"></div>
<br>
<label>with func:</label><div id="withFunction"></div>
<br> 

Таким образом, вы можете использовать его как:

 <div class="card p-3 mb-3" [innerText]="decodeSpecialEntitiesHtml(mcq.question)">
 

Потому что вы хотите, чтобы HTML вел себя как текст. Таким образом, в основном это текст, который выглядит как html. поэтому свяжите его с innerText .

TypeScript

Функция, дружественная к typescript, будет:

 public decodeSpecialEntitiesHtml(html) {
  const str = document.createElement("textarea");
  str.innerHTML = html;
  return str.value;
}
 

и использовать его в шаблоне, как:

 <div [innerText]="decodeSpecialEntitiesHtml(serverHtmlResponse)"></div>