Comptage dans ngFor - Angulaire 2

Question

J'ai un problème pour compter la boucle ngFor dans Angular 2. Je tente 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. Im en utilisant 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> 

espère que vous pouvez me aider.

À la votre!

Answer 1

Si vous ne voulez pas formater votre structure de données en groupes de colonnes (que je peux comprendre), vous pouvez toujours rendre les colonnes 3 par ligne. Pour cela, vous devrez précalculer un tableau auxiliaire supplémentaire d'index de ligne, par ex. [0,1,2,3]. Le nombre d'éléments dans le tableau doit être égal au nombre de ion-row que vous voulez rendre. Donc, dans votre fonction constructeur de contrôleur que 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 ngFor boucles:

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

Voilà. En fonction du segment de ligne actuel, le segment de découpe affiche les éléments nécessaires par ligne.

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

Answer 2

Je voudrais modifier les données pour représenter la structure que vous voulez rendre (lignes de 3 colonnes), puis rendre 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> 

Answer 3

Vous ne devez pas faire tout changement dans les données! Ionic 2 fournit déjà le support pour cela. Nous pouvons utiliser le wrap dans <ion-row>. Exemple: <ion-row wrap>

Source

utiliser l'attribut enroulé sur un élément <ion-row> pour permettre que les articles dans rangée pour envelopper. Ceci applique le style flex-wrap: wrap; à l'élément <ion-row> .