如何在离子行中显示具有替代颜色的离子项目？

Question

<ion-row   *ngFor="let box of Boxes"   >
  <ion-col col-9>
  <ion-item  >
  {{box}}
  </ion-item>
  </ion-col>
  <ion-col col-3>
      <ion-checkbox></ion-checkbox>
  </ion-col>

</ion-row>

如何以替代颜色显示项目？每个行项目的替代颜色。？

Answer 1

尝试这个：

.html

<ion-row   *ngFor="let box of Boxes; let i = index;">
    <ion-col col-9>
        <ion-item  [ngClass]="(i % 2 == 0) ? 'odd' : 'even'">
            {{box}}
        </ion-item>
    </ion-col>
    <ion-col col-3>
        <ion-checkbox></ion-checkbox>
    </ion-col>
</ion-row>

.scss

.odd{
  color: blue;
}
.even{
  color: green;
}