J'ai un problème pour compter la boucle ngFor dans Angular 2. J'essaie de développer une grille qui a 3 colonnes et une quantité dynamique de lignes. Je voudrais parcourir mon tableau et ajouter les éléments de gauche à droite et tous les trois éléments, il devrait passer à la ligne suivante. J'utilise Ionic Framework 2.0.

Mon code ressemble à ceci:

   <ion-row *ngFor="#m of movies; #i = index"  (click)="movieTapped(m)">
        <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
                {{m.Title}} <br>
                Rating:     {{m.imdbRating}}<br>
                Rated:      {{m.Rated}}<br>
                Released:   {{m.Year}}<br>
            </div>
        </ion-col>
        <ion-col  width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
  </ion-row>

J'espère que vous pourrez m'aider.

À votre santé!

7
Jonas 8 mars 2016 à 17:17

3 réponses

Meilleure réponse

Si vous ne souhaitez pas formater votre structure de données en groupes de colonnes (ce que je peux comprendre), vous pouvez toujours afficher les colonnes 3 par ligne. Pour cela, vous devrez précalculer un tableau auxiliaire supplémentaire d'index de ligne, par exemple [0,1,2,3]. Le nombre d'éléments du tableau doit être égal au nombre de ion-row que vous souhaitez rendre. Donc, dans la fonction constructeur de votre contrôleur, vous pouvez faire quelque chose comme ceci:

this.rows = Array.from(Array(Math.ceil(this.movies.length / 3)).keys())

Ensuite, dans le modèle, vous aurez deux boucles ngFor:

<ion-row *ngFor="#i of rows" (click)="movieTapped(m)">
  <ion-col *ngFor="#m of movies | slice:(i*3):(i+1)*3" width-33>
    <div class="row responsive-md">
      <img [src]="m.Poster" width="100%" /> {{m.Title}}
      <br> Rating: {{m.imdbRating}}
      <br> Rated: {{m.Rated}}
      <br> Released: {{m.Year}}
    </div>
  </ion-col>
</ion-row>

C'est ça. Selon le tuyau de tranche d'index de ligne actuel, les éléments nécessaires sont rendus par ligne.

Voici la démo simplifiée: http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

15
dfsq 8 mars 2016 à 16:47

Vous n'avez pas à modifier les données! Ionic 2 en fournit déjà le support.

Nous pouvons utiliser le wrap dans <ion-row>. Exemple: <ion-row wrap>

La source

Utilisez l'attribut wrap sur un élément <ion-row> pour autoriser les éléments dans ce rangée pour envelopper. Cela applique le style flex-wrap: wrap; au <ion-row> élément.

7
Gowri 26 août 2016 à 13:04

Je modifierais les données pour représenter la structure que vous souhaitez rendre (lignes de 3 colonnes), puis rendrais la vue en fonction des données.

<ion-row *ngFor="let r of rows; let i = index"  (click)="movieTapped(m)">
    <ion-col width-33 *ngFor="let m of r; let j = index">
        <div class="row responsive-md">
            <img [src]="m.Poster" width="100%" />
            {{m.Title}} <br>
            Rating:     {{m.imdbRating}}<br>
            Rated:      {{m.Rated}}<br>
            Released:   {{m.Year}}<br>
        </div>
    </ion-col>
</ion-row>
2
Günter Zöchbauer 2 mai 2016 à 07:52