Angular

Question

我想在 Angular

的 <p> 标签内渲染一些 html table 和一些数据

在我的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 代码需要渲染。

但是 table 没有呈现：

我的错误在哪里？

Answer 1

您的代码应该可以工作 see 将 'items' 更改为 'reportList' 并调用 domSanitzer.bypassSecurityTrustHtml() 并且您 html.

 *ngFor="let item of reportList"

Answer 2

使用自定义 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 3

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

一起使用

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

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

Angular - Render HTML inside <p> tag

html

innerhtml