具有交替列的離子網格

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

你也可以參考官方文檔，因為有一個很好的例子以及如何使用網格。 此外，您可能想要操縱間距/裝訂線，文檔中對此進行了說明。

如果你有你的圖像數組，像這樣 `['img1', 'img2', 'img3'] 你可能想檢查你是否有 3 來顯示它們 2 + 1 （第一行有 2 個，第 1 行有 1 個）第二），所以你可以使用類似stackblitz示例的東西。