角度警告：清理不安全的样式值答案

【问题标题】：Angular WARNING: sanitizing unsafe style value角度警告：清理不安全的样式值
【发布时间】：2020-01-31 05:09:32
【问题描述】：

更新：我建议人们首先查看上面的链接，因为有一些很好的解决方案。

但是我无法让它们中的任何一个适用于我的特定情况，因为我的问题与 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>

【问题讨论】：

WARNING: sanitizing unsafe style value url的可能重复
所以...当您编写此问题时，向您提供了重复的几乎可以肯定。只是好奇为什么您没有在问题中提及它，或者您是否查看过它？
我确实看到了，我尝试了建议的解决方案，但无法让它发挥作用。以后我会提到我已经尝试过的。

标签： angular

【解决方案1】：

请试试这个

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

【讨论】：

谢谢，知道了。我以为我已经尝试过了，但我想没有。我有另一个可行的解决方案（我将在下面添加），但你的更好，所以我会接受这个。

【解决方案2】：

这也有效，但@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);
  }

【讨论】：