如何清理与{{}}绑定的内容

Question

我正在尝试显示带有启动符DataView的对象列表。除其他变量外，对象也具有斑点图像。尝试显示图像时出现sanitizing unsafe URL value '`data: image/png;base64`,'错误。因此，我在Internet上针对此问题建议使用DomSanitizer创建SafeHtmlPipe，但该错误仍然存​​在。然后，我在这里读到[In RC.1 some styles can't be added using binding syntax），无法使用prop="{{sanitizedContent}}"绑定已清理内容，因为{{}}在分配值之前将其字符串化，这会破坏清理。那么有没有解决方法可以使这项工作呢？预先感谢您的帮助！

HTML

<p-dataView 
  *ngIf="filterResult && filterResult.list.length > 0"
  (onLazyLoad)="setLazyContainer($event)"
  #dv 
  [lazy]="true"
  [value]="filterResult.list"
  [paginator]="true" 
  [rows]="20" 
  paginatorPosition="both" 
  filterBy="name"
  [totalRecords]="filterResult.totalRecords"
  [rows]="filterData.rows"
  [first]="filterData.from"
  layout="grid">
  <ng-template let-merchant pTemplate="gridItem">
      <div style="padding:.5em" class="ui-g-12 ui-md-6 ui-lg-4">
          <p-panel [style]="{'text-align':'center'}">
              <img src="'data:image/png;base64,' + {{merchant.logo}} | safeHtml" width="90%">
              <div class="panel-title">{{merchant.name}}</div>
              <div class="panel-sub-title">{{'category' | lang }}:</div>
              <div class="panel-text">Lorem ipsum</div>
              <div class="panel-sub-title" >{{'town' | lang }}:</div>
              <div class="panel-text">{{merchant.city}}</div>
              <div style="display: flex; justify-content: space-between; background-color: black; color: white; padding: 8px;">
                <span style="font-size: 1.3rem; text-align: left;">{{ 'donation_offered' | lang }}:</span>
                <span style="font-size: 2.2rem; font-weight: 550; text-align: right;">??%</span>
              </div>
          </p-panel>
      </div>
  </ng-template>
</p-dataView>

SafeHtmlPipe

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml', pure: true})
export class SafeHtmlPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }

}

UserDetails-要显示的对象

export class UserDetails implements Serializable {
    userId: number;
    user: DBUser;
    name: string;
    website: string;
    country: string;
    zipCode: string;
    city: string;
    streetAndNr: string;
    legalId: string;
    email: string;
    phoneNr: string;
    introductionHu: string;
    introductionEn: string;
    logo: any;
    cover: any;
}

Answer 1

您尝试过这个吗？

在此处实时查看：https://stackblitz.com/edit/angular-5gcdx1

HTML：

<img [src]="merchant.logo | sanitizeHtml" /> 

FilterPipe

  return this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'+url);