Bagaimana untuk membuat grid responsif dalam Sudut ionik dan ngfor?

Question

Bagaimana untuk membuat grid responsif dalam Sudut ionik dan ngfor? sama seperti di sini Masukkan penerangan imej di sini

Templat Grid Saya:

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

Saya cuba mencadangkan grid ini tetapi saya tidak tahu bagaimana untuk menunjukkannya dalam gelung ngFor.

<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

Anda boleh cuba menambah saiz pada ion-col dan masukkan *ngFor ke dalam ion-col itu sendiri. Contohnya boleh jadi:

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

Seperti yang anda lihat, saya menggunakan saiz 4 supaya 3 lajur muat dalam 1 baris (maksimum 12 lajur, jadi 12/4 = 3). harap ia membantu anda!