Рендеринг HTML-содержимого в Ionic 3/4/5

view.html

<div>{{text}}</div>

Вопрос в том, что в «тексте» есть HTML, который я хочу отображать должным образом, но он показывает только теги HTML и текст.

Что я могу сделать, чтобы отобразить такой контент?

Я пробовал более раннюю версию (Ionic 1/2), и ничего не работает с Ionic v3.


typescript angular ionic3 ionic5 ionic4
person sam_v    schedule 26.06.2017    source источник

Ответы (2)


arrow_upward
74
arrow_downward

Вы должны использовать привязку атрибута innerHTML следующим образом:

<div [innerHTML]="text"></div>

Дополнительную информацию см. В документации по Angular.

person sebaferreras    schedule 26.06.2017
comment
Изменить: innerHTML тоже работает, но полностью без заглавных букв - нет. - person sam_v; 26.06.2017
comment
это работает для меня в другом случае: я использовал Youtube API, который поставляется с закодированными текстами, например. но это решение дало мне оригинальный символ, который мне нужен. Спасибо, бро,,, - person shurvirpm; 16.11.2019

arrow_upward
0
arrow_downward

если вы хотите написать это в абзаце, вы можете сделать это с помощью

<p><span [innerHTML]="htmlObject"></span></p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
person Muhammad Tahir    schedule 14.05.2019