两个 [style.filter] 以角度绑定在单个元素上

Question

我在一个显示图像的 div 上有两个滑块，一个用于blur，另一个用于hue-rotate。

我的 html 我已经适应了以下一个答案：

<img src="{{ quizedMovie.poster}}" alt="movie poster" class="img-thumbnail" style="height: 100%;" [ngStyle]="{'filter': blurring + ' ' + color }">

 <div class= "container">
Blur<mat-slider min="0" max="15" step="1" value="1"  (input)="onBlurChange($event)"></mat-slider>
Color<mat-slider min="0" max="360" step="10" value="1"  (input)="onColorChange($event)"></mat-slider>
 </div>

我的ts：

  onBlurChange(event: any) {
    let blurValue= event.value   
    this.blurring = "blur("+ blurValue +"px)"
  }

  onColorChange(event: any) {
    let colorValue= event.value   
    this.color = "hue-rotate("+ colorValue +"deg)"
  }

现在我面临的问题是，当图片加载时，在 Chrome Inspector Tool 中，我的图像没有样式。如果我用滑块更改两个值之一，也没有样式。 但是当我更改这两个值时，两种样式都会应用。我尝试在两者上设置一个与零不同的默认值，但问题仍然存在。

Answer 1

好吧，你没有向我们展示你是如何绑定“this.blurring”和“this.color”的。

您还可以创建一个方法来连接字符串 this.blurring + this.color。 在 Chrome Inspector 中仔细检查 DOM 和样式中应用的内容。