在文本框中显示HTML代码

Question

我有一个文本框，我从Json响应中填写如下

 <div class="gadget-body" style="height:100px">
    <label>{{ textData}}</label>
  </div>

但是现在我的Json正在返回带有<p>和<h1>标签的html代码。我绑定了响应，但它显示的是<p>和<h1>标记，而不是应用它。

Answer 1

简单易用的方法是使用innerhtml标签

<div class="gadget-body" >
   <div [innerHTML]="textData">
</div>
  </div>

Answer 2

也许有这样的功能：

function htmlToPlaintext(text) {
  return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}

然后你使用：

<div class="gadget-body" style="height:100px">
    <label>{{ htmlToPlaintext(textData) }}</label>
</div>