具有交替列的离子网格

Question

我对 Angular 不是很熟悉。我想要一个这样的网格：

即每行有一个图像与两个图像交替。我尝试使用此代码，但我得到了一个稍微不同的网格（我也得到了两次相同的图像，因为我不知道如何增加循环内的索引）：

.html:

<ion-content>

  <ion-grid class="design">
    <ion-row size="12" *ngFor="let t of types ; let i=index">
      <ion-col *ngIf="i%3==0" size="12">
        <img oncontextmenu="return false;" src={{t?.img}} class="center" />
      </ion-col>
      <ion-col *ngIf="i%3!=0" size="6">
        <img oncontextmenu="return false;" src={{t?.img}} class="center" />
      </ion-col>
      <ion-col *ngIf="i%3!=0" size="6">
        <img oncontextmenu="return false;" src={{types[i+1]?.img}} class="center"/>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

.scss:

.design {
  position: center;
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: block;
  width: 100%;
}

我该如何修改它？

Answer 1

您需要将行包装在ion-row 元素中，并将所有内容包装在ion-grid 中，然后您可以对每一列使用ion-col。这是全角元素和 2 列行的简单示例：https://stackblitz.com/edit/ionic-yxpfht?file=pages%2Fhome%2Fhome.ts

你也可以参考official docs，因为这里有一个很好的例子来说明如何使用网格。此外，您可能想要操纵间距/装订线，文档中对此进行了说明。

如果你有你的图像数组，像这样 `['img1', 'img2', 'img3'] 你可能想检查你是否有 3 来显示它们 2 + 1 （2 在第一行和1 在第二个），所以你可以使用类似 stackblitz 例子的东西。