Ionic 在离子选择选项中更改div的属性

nnt7mjpx 于 2023-04-03 发布在 Ionic

关注(0)|答案(1)|浏览(150)

我想添加一些小圆圈旁边的离子选择选项行的属性“< div >“.我尝试了几个选项，但没有他们的预期工作.希望有人可以帮助.

<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
      *ngIf="item.isActive === true"
      slot="start"
      class="circleBase circle1"
    >
      true &nbsp;
    </div>
    <div
      *ngIf="item.isActive === false"
      slot="start"
      class="circleBase circle1"
    >
      false &nbsp;
    </div>
    <ion-label>{{item.beginDate}} -</ion-label>
    <ion-label> {{item.eventName}} </ion-label>
  </ion-select-option>
</ion-select>
</div>

我想有一个红色或绿色的圆圈，而不是布尔值

ionic-framework

来源：https://stackoverflow.com/questions/75914952/change-properties-of-div-inside-an-ion-select-option

1条答案

按热度按时间

osh3o9ms1#

你必须在代码中添加一些css来实现这一点。

.circleBase {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.red{
  background-color: red;
}

.green {
  background-color: green;
}

你的html应该是这样的。

<ion-select-option class="my-select-option" *ngFor="let item of user_events" value="{{item.id}}">
  <div *ngIf="item.isActive" slot="start" class="circleBase green"></div>
  <div *ngIf="!item.isActive" slot="start" class="circleBase red"></div>
  <ion-label>{{item.beginDate}} -</ion-label>
  <ion-label> {{item.eventName}} </ion-label>
</ion-select-option>

赞(0）回复(0）举报 2023-04-03

我来回答

Ionic 在离子选择选项中更改div的属性

1条答案

相关问题

热门标签

最新问答