如何在离子行中显示离子项目并在其中显示交替颜色？答案

【问题标题】：how to display ion-item in ion-row with alternate color in it?如何在离子行中显示离子项目并在其中显示交替颜色？
【发布时间】：2019-06-22 15:57:44
【问题描述】：

<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>

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

【问题讨论】：

只是为了确认，你想在 ion-row 上应用颜色对吗？
是的，我想显示行颜色交替

标签： angular ionic-framework

【解决方案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;
}

【讨论】：

非常感谢 AddWeb。 :)

【解决方案2】：

试试这个：

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

我认为这会有所帮助..

【讨论】：

【解决方案3】：

你可以使用 ngFor 的偶数属性

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

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

【讨论】：

` {{box}} ` 并在后台css` .evenStyleClass{ background-color:grey; } .oddStyleClass{ 颜色：红色； }` 但它不起作用？