* ngFor中的角度/离子交换元素

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