角度-在内部呈现HTML<；p>；标签

我想在一个

标记中呈现一些html表格和一些数据

在我的

report.component.html

<div class="ui-g-12">
  <div class="ui-g-12" *ngFor="let item of items">
    <p-fieldset legend="{{item.recordTime}}" [toggleable]="true" [collapsed]="true">
      <div class="overflow">
        <p [innerHTML]="item.message"></p>
      </div>
    </p-fieldset>
  </div>
</div>

请注意，在

newReport.message

中，inside包含一些应该呈现的html代码

但该表未呈现：

我的错误在哪里？

您的代码应该可以正常工作 将“items”更改为“reportList”，并调用domsanizer.bypassSecurityTrustHtml（）和html

 *ngFor="let item of reportList"

你的代码应该可以工作 将“items”更改为“reportList”，并调用domsanizer.bypassSecurityTrustHtml（）和html

 *ngFor="let item of reportList"

---

使用自定义角度管道绕过html的安全性

您的HTML将如下所示

<div [innerHTML]="item.message | TrustHtml"></div>

---

使用自定义角度管道绕过html的安全性

您的HTML将如下所示

<div [innerHTML]="item.message | TrustHtml"></div>

---

绕过消毒剂以信任任何内容可能是一个安全问题。由于Angular不是一个专门的消毒库，所以它对可疑内容过于热心，不愿承担任何风险。例如，它几乎删除了所有属性。您可以将消毒委托给一个专用的库-domprify。下面是我制作的一个包装器库，可以轻松地将DOMPurify与Angular一起使用：

---

绕过消毒剂信任任何内容可能是一个安全问题。由于Angular不是一个专门的消毒库，所以它对可疑内容过于热心，不愿承担任何风险。例如，它几乎删除了所有属性。您可以将消毒委托给一个专用的库-domprify。下面是我制作的一个包装器库，可以轻松地将DOMPurify与Angular一起使用：

---

请看下面的答案，我最近偶然发现了这一点。我通过为我的

p

-标记（我们称之为

inlineP

）声明

ViewChild（）

）并通过

inlineP.nativeElement.innerHTML=

内联HTML来解决这个问题。您必须在

ngAfterViewInit（）

中执行此操作。条目是否等于reportList？@ahmeticat抱歉，我犯了错误，我更新了问题，是的。@ValentinoRu抱歉，我是angular的新手，所以我不太确定您的意思，您有一个简单的代码片段可以解释吗？谢谢你的回答我最近偶然发现了这个。我通过为我的

p

-标记（我们称之为

inlineP

）声明

ViewChild（）

）并通过

inlineP.nativeElement.innerHTML=

内联HTML来解决这个问题。您必须在

ngAfterViewInit（）

中执行此操作。条目是否等于reportList？@ahmeticat抱歉，我犯了错误，我更新了问题，是的。@ValentinoRu抱歉，我是angular的新手，所以我不太确定您的意思，您有一个简单的代码片段可以解释吗？感谢您可能希望将该管道名称更改为

TrustHtml

，以更真实地表达其目的您可能希望将该管道名称更改为

TrustHtml

，以更真实地表达其目的