Angular 2 Primeng 数据表中的管道出现安全错误

Question

我有一个 Pipe 可以解码 html 代码。例如 <p>test</p> 变成 test

当我在列中使用它时，它不显示数据但显示“SafeValue must use [property]=binding: XXXX (see http://g.co/ng/security#xss)”

数据表

<p-dataTable [value]="toShowSubVragen">

   <!-- WITH Pipe, DOESN'T WORK
   SHOWS: SafeValue must use [property]=binding: XXXX (see http://g.co/ng/security#xss)-->
    <p-column field="tekst" header="With Pipe">
        <template let-col let-vraag="rowData" pTemplate="body">
            <span>{{vraag[col.field] | safeHtml}}</span>
        </template>
    </p-column>

    <!-- WITHOUT Pipe, WORKS
   SHOWS: the tekst data..  -->
    <p-column field="tekst" header="Without Pipe">
        <template let-col let-car="rowData" pTemplate="body">
            <span>{{car[col.field]}}</span>
        </template>
    </p-column>

</p-dataTable>

管道

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

我该如何解决这个问题？

Answer 1

直接使用 safeHtml 或消毒剂 {{}} 是没有意义的，因为结果是字符串化的，这会撤消 | safeHtml.

的应用

<span>{{vraag[col.field] | safeHtml}}</span>

也许你的意思是

<span [innerHTML]="vraag[col.field] | safeHtml"></span>

Angular 2 Primeng 数据表中的管道出现安全错误

Angular 2 Pipe inside Primeng Datatable gives security error

primeng

angular