如何在离子行中以交替颜色显示离子项目?

尝试以下操作:

。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;
}

尝试以下操作:

。html

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

。scss公司

.row-custom-bg:nth-of-type(even) {
    background: green;
}
.row-custom-bg:nth-of-type(odd) {
    background: blue;
}

我认为这会很有帮助。。

可以使用ngFor的奇偶属性

<ion-row   *ngFor="let box of Boxes; let odd=odd; let even=even;
[ngClass]="{ odd: oddStyleClass, even: evenStyleClass }   >

在这里,oddStyleClass和evenStyleClass将定义背景色或您想要应用的任何其他样式