时间戳

首页 > 解决方案 > 离子选择选项根据条件数据改变颜色

html - 离子选择选项根据条件数据改变颜色

问题描述

我有一个循环通过设备的 *ngFor 循环，这些设备连接到实时数据库。我的代码检查设备上次联机的时间并将其标记为脱机或联机。现在由于某种原因，“ion-select-option”无法通过样式访问，而是在 global.scss 中被选中，如下所示：

 ion-alert.
select-alert {
    --background: red!important;
    // --color: red !important;
    button {
        color: white !important;
        font-size: 20px !important;
    }

    .sc-ion-alert-md {
        color: red;
    }
}

这不起作用，因为我需要颜色是动态的。下面是一段代码，我在其中尝试通过一组颜色 levelColors 进行更改

public levelColors: { [level: string]: string } = {
    Alert: "grey",
    online: "green",
    Level2: "blue",
    Level3: "orange",
    offline: "red",
  };

我觉得其余的都是不言自明的，所以我的问题是......有没有办法为选项着色或者我应该选择不同的解决方案？

  <ion-select [(ngModel)]="vehicleSelection" (ionChange)="onSelectChange($event)">
    <ion-select-option *ngFor="let vehicle of vehicleArray" [value]="vehicle"
      [style.color]="levelColors[vehicle.stat]">
      {{vehicle.fleet_nr}} [{{vehicle.reg_nr}}]
      {{levelColors[vehicle.stat]}}
    </ion-select-option>
  </ion-select>

标签： htmlionic-framework

解决方案

想通了，花了我很长时间希望这可以帮助其他人：所以问题是项目是在 DOM 中创建的，与 html 代码无关。为了绕过这个，我在 ion-select 上创建了一个点击事件，当它被触发时，我访问 DOM 并通过类名获取所有元素。当单击事件延迟加载 html 元素时，会出现另一个问题，因此为了绕过这个问题，我只需设置一个快速超时，然后实际元素被加载并存储在变量中。我以为我已经完成了，但还没有，您必须将 DOM 元素作为一种类型来获取，否则您无法编辑选项的样式。之后它就非常简单了，因为您可以根据需要放置逻辑并更改样式。

以下是我的代码：

setTimeout(function () {
  let x = window.document.getElementsByClassName('alert-radio-button alert-tappable alert-radio ion-focusable sc-ion-alert-ios') as HTMLCollectionOf<HTMLElement>
  for (let i = 0; i < x.length; i++) {
    console.log(x[i])
    x[i].style.backgroundColor = "green"
  }
}, 25);

推荐阅读