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

【问题标题】：Angular - Render HTML inside <p> tagAngular - 在 <p> 标签内渲染 HTML
【发布时间】：2020-03-11 08:17:07
【问题描述】：

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

但是表格没有渲染：

我的错误在哪里？

【问题讨论】：

查看DomSanitizer 为您解答
我最近偶然发现了这个。我通过为我的p-标签（我们称之为inlineP）声明ViewChild() 并通过inlineP.nativeElement.innerHTML = <your html value> 内联HTML 来解决它。您必须在 ngAfterViewInit() 中执行此操作。
项目是否等于reportList？
@ahmeticat 抱歉我的错误，我更新了问题，是的。
@ValentinoRu 抱歉，我是 Angular 新手，所以我不太清楚你的意思，你有一个简单的代码 sn-p 可以解释吗？谢谢

标签： html angular innerhtml

【解决方案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);
    }
}

【讨论】：

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

【解决方案2】：

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

 *ngFor="let item of reportList"

【讨论】：

【解决方案3】：

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

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

【讨论】：