如何修改ion-select-option内div样式，替换布尔值为红绿圆圈？

修改后的HTML代码 #

<div class="eventSelect">
  <ion-select
    interface="popover"
    placeholder="Select Event"
    id="popover-bottom"
    (ionChange)="loadSelectedEvent($event)"
  >
    <ion-select-option
      class="my-select-option"
      *ngFor="let item of user_events"
      value="{{item.id}}"
    >
      <!-- 合并为单个div，通过动态类控制圆圈颜色 -->
      <div 
        slot="start" 
        class="status-circle"
        [ngClass]="{'active-circle': item.isActive, 'inactive-circle': !item.isActive}"
      ></div>
      <ion-label>{{item.beginDate}} -</ion-label>
      <ion-label> {{item.eventName}} </ion-label>
    </ion-select-option>
  </ion-select>
</div>

对应的CSS样式 #

.status-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.active-circle {
  background-color: #2ecc71; /* 绿色，代表激活状态 */
}

.inactive-circle {
  background-color: #e74c3c; /* 红色，代表未激活状态 */
}

关键修改说明 #

• 移除了div内的true/false文本，通过CSS的background-color和border-radius属性直接绘制圆圈，无需依赖文本内容。
• 用[ngClass]动态绑定类名，根据item.isActive的布尔值自动切换绿色/红色样式，简化了冗余的*ngIf判断逻辑。
• 保留slot="start"确保圆圈固定显示在选项文本左侧，适配Ionic组件的布局规则。

内容的提问来源于stack exchange，提问作者xne2687