Wie erstelle ich ein reaktionsfähiges Raster in ionic Angular und ngfor?

Question

Wie erstelle ich ein reaktionsfähiges Raster in ionic Angular und ngfor? genau wie hier Geben Sie hier eine Bildbeschreibung ein

Meine Rastervorlage:

<ion-grid>
  <ion-row>
    <ion-col>
        <ion-item *ngFor="let prod of displayedList" class="item-entry" detail routerLink="/tabs/tab1/prod-detail/{{ prod.id }}">
          <ion-thumbnail>
            <ion-img [src]="prod.images[0].src" alt="{{ prod.name }}"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h3 class="item-name">{{ prod.name }}</h3>
            <ion-text>
              <p class="price">{{ prod.price | currency:"GBP" }}</p>
            </ion-text>
          </ion-label>
        </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Ich versuche, dieses Raster vorzuschlagen, weiß aber nicht, wie ich es in der ngFor-Schleife anzeigen soll.

<ion-grid>
  <ion-row>
    <ion-col>1</ion-col>
    <ion-col>2</ion-col>
    <ion-col>3</ion-col>
  </ion-row>
</ion-grid>

Answer 1

您可以尝试为 ion-col 添加大小并将 *ngFor 放入 ion-col 本身。一个例子可以是：

<ion-col sizeXs="4" *ngFor="let element of elements">
   <ion-item>...</ion-item>
</ion-col>

如您所见，我使用了尺寸 4，以便 1 行内可以容纳 3 列（最多 12 列，因此 12/4 = 3）。 希望对您有帮助！