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

Posted 2023-05-07

技术标签:

【中文标题】Angular - 在 <p> 标签内渲染 HTML【英文标题】：Angular - Render HTML inside <p> tag 【发布时间】：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 可以解释吗？谢谢 【参考方案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。