Angular - 在 <p> 标签内渲染 HTML

Question

我想在Angular中呈现一些HTML表格和一些数据，数据放在<p>标签中

在我的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>

在我的report.component.ts文件中。

ngOnInit() {
  this.listAllReports();
}

  listAllReports() {
    this.httpSvc.fetchWithoutSpinner(this.urlBuilder.getAllReportUrl()).subscribe(data => {
      data.forEach(report => {
        const newReport= new Report();
        newReport.message = '<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;"> <tr> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item1</th> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item2</th> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item3</th> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item4</th> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item5</th> <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Item6</th> </tr><tr> <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">238342</td><td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">000</td><td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">807</td><td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">ZZZZ</td><td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">XXX</td><td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">YYY</td></tr></table>';
        newReport.recordTime = report.recordTime;
        this.items.push(newReport);
      });
    });
  }

注意，在newReport.message中，里面有一些应该被渲染的HTML代码。

但是表格没有被渲染： 我的错误在哪里？

- hades

---

请查看DomSanitizer以获取您的答案。 - Poul Kruijt

我最近遇到了这个问题。 我通过为我的 p 标签（我们称之为 inlineP）声明一个 ViewChild() 并通过 inlineP.nativeElement.innerHTML = <your html value> 内联 HTML 来解决它。 您必须在 ngAfterViewInit() 中执行此操作。 - Valentino Ru

项目是否等于报告列表？ - ahmeticat

@ahmeticat 抱歉，我的错误，我更新了问题，是的。 - hades

请查看此链接：https://angular.cn/api/platform-browser/DomSanitizer - Jayakumar Thangavel

Answer 1

使用自定义的Angular管道绕过html安全性。

您的HTML将会像这样：

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

管道将如下所示

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'TrustHtml',
    pure: true // This allows the pipe to only run once
})
export class TrustHtmlPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {
    }

    transform(pUnsafe: string) {
        return this.sanitizer.bypassSecurityTrustHtml(pUnsafe);
    }
}

- Jayme

---

你可能想把那个管道的名称改为 TrustHtml，以更符合其目的。 - Poul Kruijt

Answer 2

您的代码应该能够正常工作查看 将“items”更改为“reportList”，并调用domSanitizer.bypassSecurityTrustHtml()和您的html。

 *ngFor="let item of reportList"

- Marcel Hoekstra

Answer 3

绕过过滤器以信任任何内容可能存在安全隐患。由于 Angular 不是专用的过滤库，它对可疑的内容过度谨慎，以避免冒任何风险。例如，它几乎会删除所有属性。您可以将过滤委托给专用库 DOMPurify。这是我制作的一个包装库，可以轻松地在 Angular 中使用 DOMPurify：

https://github.com/TinkoffCreditSystems/ng-dompurify

- waterplea