如何从.scss文件中的.ts文件中获取变量值

Question

我正在尝试更改图像的不透明度。我的SCSS中的CSS代码如下：

home.scss代码

img {
    filter: grayscale(70%);
}

如何动态更改grayscale变量？

我已经在HTML中获取了输入字段，我希望它在此处键入的值，仅此而已：

我的page.html代码：

<ion-list>
  <ion-item>
    <ion-input name="imgg" [(ngModel)]="imgg" placeholder="enter"></ion-input>
  </ion-item>
  <button ion-button (click)="cli()" >Submit</button>
</ion-list>
<img src="../assets/icon/Stickers-20.png" width="300" height="300">

page.ts代码：

cli() {
  this.imgg;
  console.log(this.imgg);
}

Answer 1

考虑使用ngStyle指令将值动态绑定到滤波器值，就像这样：

在您的组件中

grayScaleValue = 70 // assign it any value in your component

在您的模板中

<img src="../assets/icon/sticker-20.png" [ngStyle]="{'filter': 'grayscale(' + grayScaleValue + ')%'}"