Comment créer une grille réactive dans ionic Angular et ngfor ?

Question

Comment créer une grille réactive dans ionic Angular et ngfor ? comme ici Entrez la description de l'image ici

Mon modèle de grille :

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

J'essaie de suggérer cette grille mais je ne sais pas comment l'afficher dans la boucle 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

Vous pouvez essayer d'ajouter de la taille à ion-col et mettre *ngFor dans ion-col lui-même. Un exemple pourrait être :

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

Comme vous pouvez le voir, j'ai utilisé la taille 4 pour que 3 colonnes tiennent dans 1 ligne (maximum de 12 colonnes, donc 12/4 = 3). j'espère que cela vous aidera!