Ionic 4以编程方式更新离子项目背景

Question

我有这样的东西：

<ion-item>
     <ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>

我需要能够根据程序结果将离子项目的背景设置为红色和绿色之间的任何颜色，因此我正在page.ts中生成值"{'background-color':'rgb(#,#,0)'}"。

我无法使用[ngStyle]="{'--ion-background':'rgb(#,#,0)'}"，因为当值更改为ionic时，已将html扩展为其item-native组件。我需要能够通过item-native或[ngStyle]或类似ng-style的方式访问[.item-native background]？

或者是否有更简便/更好的方法？

Answer 1

我设法做到这一点：

我的函数在page.ts中为此对象设置了一个变量：{'background-color':'rgb(' + function + ',' + function + ',0)'}

HTML：

<div [ngStyle]="bgColVar">
  <ion-item class="transparentbg">
    <ion-label class="ion-text-center">{{variable}}</ion-label>
  </ion-item>
</div>

SCSS：

.transparentbg{
    --ion-background-color: transparent;
}

我将整个对象包装在常规div中，并在使离子元素背景透明的同时动态设置其背景。