Angular 2 Pipe in Primeng Datatable gibt Sicherheitsfehler

Question

Ich habe eine Pipe, die die HTML-Codes dekodiert. Zum Beispiel <p>test</p> wird test

Wenn ich es in einer Spalte verwenden, ist es die Daten nicht zeigen, sondern 'SafeValue must use [property]=binding: XXXX (see http://g.co/ng/security#xss)'

Datentabelle

<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> 

Rohr

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

Wie kann ich das lösen?

Answer 1

Mit der safeHtml oder die Sanitizer direkt mit {{}} sinnlos ist, weil das Ergebnis Zeichenfolge ist, die die Anwendung von | safeHtml rückgängig macht.

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

Vielleicht bedeutete Sie

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