Угловое ПРЕДУПРЕЖДЕНИЕ: дезинфекция небезопасного стиля

Question

ОБНОВЛЕНИЕ: я рекомендую, чтобы люди сначала посмотрели по ссылке выше, так как есть несколько хороших решений.

Однако я не мог заставить их работать в моем конкретном случае, так как моя проблема не была связана с URLно ширина и высота.

Вопрос:

В консоли появляется следующее предупреждение со следующим кодом:

WARNING: sanitizing unsafe style value calc(300px * 0.7509025270758123) (see http://g.co/ng/security#xss).

Код работает нормально, но он выполняетсяза каждое изображение на моей странице и заполняет консоль.

Есть идеи как убрать предупреждение?

<div 
   *ngIf="swipeFile.imageUrl" 
   class="linear-background" 
   [ngStyle]="{'width': '300px', 'height': 'calc(300px * ' + (swipeFile.imageHeight / swipeFile.imageWidth) + ')'}" >
   <img mat-card-image [src]="swipeFile?.imageUrl" alt="image">
</div>

Answer 1

Это тоже работает, но ответ от @Amir лучше.

<div *ngIf="swipeFile.imageUrl" class="linear-background" [style]="getSanitizedStyle('width: 300px; height: ' + (300 * (swipeFile.imageHeight / swipeFile.imageWidth)).toFixed(0) + 'px')" >

.ts

constructor(private sanitizer: DomSanitizer) { }

 public getSanitizedStyle(style: string) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }

Answer 2

Пожалуйста, попробуйте это

    <div 
       *ngIf="swipeFile.imageUrl" 
       class="linear-background" 
       [ngStyle]="{'width': '300px', 'height': (swipeFile.imageHeight / swipeFile.imageWidth) * 300 + 'px'}" >
       <img mat-card-image [src]="swipeFile?.imageUrl" alt="image">
    </div>