Ionic 4 обновляет фон ion-item программно

Question

У меня примерно так:

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

Мне нужно установить фон ионного элемента на любой цвет между красным и зеленым на основе результатов программы, поэтому я генерирую значение "{'background-color':'rgb(#,#,0)'}" в page.ts.

Я не могу использовать [ngStyle]="{'--ion-background':'rgb(#,#,0)'}" как когда значение изменяется, ionic уже расширил HTML в его item-nativeсоставная часть. Мне нужно иметь доступitem-native как-то с [ngStyle] или ng-style или может что-то вроде [.item-native background]?

Или есть более простые / лучшие способы сделать это?

Answer 1

Установите прозрачность фона элемента и собственного класса элемента с помощью переменной css4; а затем установите стиль фона элемента ion с помощью [ngStyle] в зависимости от возвращаемого логического значения. Пример ниже

.item {
  --background: transparent !important;
}

.item .item-native {
   --background: transparent !important;
}

Тогда HTML будет выглядеть так:

<ion-item [ngStyle]="{'background':(true)?'#32db64':'#f53d3d'}">
  <ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>

Answer 2

Мне удалось это сделать так:

Моя функция устанавливает переменную в 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 и динамически устанавливаю его фон, при этом фон ионных элементов остается прозрачным.