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

Question

我有这样的东西：

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

我需要能够根据程序结果将 ion-item 的背景设置为介于红色和绿色之间的任何颜色，因此我在 [=27= 中生成了一个值 "{'background-color':'rgb(#,#,0)'}" ].

我无法使用 [ngStyle]="{'--ion-background':'rgb(#,#,0)'}"，因为当值发生变化时，ionic 已经将 html 扩展到它的 item-native 组件中。我需要能够以某种方式使用 [ngStyle] 或 ng-style 或类似 [.item-native background]?

访问 item-native

或者是否有 easier/better 方法来做到这一点？

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 中并动态设置其背景，同时使离子元素背景透明。

Answer 2

使用 css4 变量将项目背景和项目原生 class 设置为透明；然后根据返回的布尔值使用 [ngStyle] 设置 ion-item 的背景样式。下面的例子

.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>

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

Ionic 4 update ion-item background programmatically

background-color

angular

ionic4

ion-item