代码之家 › 专栏 › 技术社区 › Sahil

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

ionic-framework angular

Sahil · 技术社区 · 7 年前

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

如何以其他颜色显示项目?每行项目的备选颜色。?

3 回复 | 直到 7 年前

AddWeb Solution Pvt Ltd 7 年前

尝试以下操作:

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

Utpaul 5 年前

尝试以下操作:

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

我认为这会很有帮助。。

Ankit Kapoor 7 年前

可以使用ngFor的奇偶属性

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

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

推荐文章

Gh05d · 更新到3后无法同步iOS项目

2 年前

Balram dangi · 离子电容器应用程序在ios中只显示白色的空白屏幕

2 年前

deszok · 电容器/离子文件系统写入文件到csv

2 年前

Fernando Aureliano · 无法在Ubuntu上升级离子版

2 年前

Rafael de Castro · 关于内存:在服务上存储json数据,还是在需要时随时获取?

3 年前

Anurag Singh · 通过mediacapture插件录制视频,但在通过文件插件-离子电容器上传时出现问题

3 年前

Andreea Purta · 未定义(读“coords”),使用@ionic native/geolocation-ionic/react

3 年前

plotnik · 发布Cordova插件的离子包装器

3 年前

Alex · 如何在Ionic Pro中设置正确版本的游戏服务

6 年前

Krishanu Mukherjee · 点击paypal时,Ionic 3 IOS应用程序崩溃

6 年前