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

Question

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

在我的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代码。

但是表未呈现：

我的错误在哪里？

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);
    }
}

Answer 2

您的代码应该可以使用see 将“项目”更改为“ reportList”，然后调用domSanitzer.bypassSecurityTrustHtml（），然后生成html。

 *ngFor="let item of reportList"

Answer 3

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

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