0

我有这样的事情：

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

我需要能够根据程序结果将 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]？

还是有更简单/更好的方法来做到这一点？

4

2 回答 2

1

使用 css4 变量将 item 和 item-native 类的背景设置为透明；然后根据返回的布尔值使用 [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>
于 2019-11-29T06:52:47.680 回答
0

我设法做到了这一点：

我的函数将 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 中并动态设置它的背景，同时让离子元素背景透明。

于 2019-10-29T09:00:51.207 回答