如何将 html 字符串（html 标签）显示为文本区域中的内容？

Question

我想在 div 标签中显示 html 标签，所以我用过，

<p [innerHTML]="data"> // data is a html tags for ex: h1 tag
</p>

它工作正常，但如果我想在文本区域打印，它不会翻译 html 代码并直接打印 html 代码，例如，

<textarea  rows="4" cols="50">
    {{data}}
</textarea>

这是stackblitz上的工作代码，

Answer 1

<textarea>是输入元素，您不能在其中绑定<b>或<i>类的 HTML 标签。

要绑定数据，请从打字稿中删除此 HTML 标记并使用[(ngModel)]将其绑定在<textarea>

像这样尝试：

<textarea  rows="4" cols="50" [(ngModel)]="data">
</textarea>

Answer 2

这是不可能的，您正在寻找的是内容可编辑的 div。 看看这个fiddle ，但基本上你需要（只需将其转换为 Angular）：

<div contenteditable="true">This is the first line.<br>
    See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the e nd?
    <br>It works nicely.
    <br>
    <br><span style="color: lightgreen">Great</span>.
</div>

Answer 3

这个问题在 stackblitz, Rendering HTML inside textarea 中已经有了答案

您正在做的是，将 div 标签设置为可编辑