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

Question

我正在尝试更改图像的不透明度。我在scss中的css代码如下所示：

DropDown代码

home.scss

要求：如何动态更改img { filter: grayscale(70%); } 变量？

我在html中输入了输入字段，我希望这能获得我在那里输入的值..那就是

我的grayscale代码：

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

感谢您抽出时间

Answer 1

考虑使用ngStyle指令将值动态绑定到过滤器值，如下所示：

您组件中的

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

模板中的

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