*ngFor 中的 Angular/Ionic 交换元素

Question

我希望能够使用*ngFor 创建一个项目列表，如下所示..

文字 - 图片
图片 - 文字
文字 - 图片
图片 - 文字强>

  <ion-grid>
    <ion-row *ngFor="let item of items">
      <ion-col col-6 ">
        <ion-card ">
          <ion-card-content>{{item.name}}
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col col-6 >
        <ion-card>
          <img [src]="item.img"/>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

但是，我不确定如何在 for 循环中实现这一点。 有什么建议？谢谢

Answer 1

当项目的索引是奇数或偶数时应用 flex-direction: row-reverse，您的选择。

    <!--HTML-->
    <!--Track the index of each item and apply reverse class if its even or odd (which ever you prefer, just change the comparator)-->
    <ion-grid>
        <ion-row *ngFor="let item of items; let i = index;" [class.reverse]="i%2 !== 0">
            <ion-col col-6>
                <ion-card>
                    <ion-card-content>{{item.name}}
                    </ion-card-content>
                </ion-card>
            </ion-col>
            <ion-col col-6>
                <ion-card>
                    <img [src]="item.img" />
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>

    <!--CSS-->
    .reverse { flex-direction: row-reverse; }