Conteggio in ngPer - Angolare 2

Question

Ho un problema durante il conteggio del ciclo ngFor in Angular 2. Sto cercando di sviluppare una griglia con 3 colonne e una quantità dinamica di righe. Vorrei scorrere il mio array e aggiungere gli elementi da sinistra a destra e ogni tre elementi dovrebbe saltare alla riga successiva. Sto usando Ionic Framework 2.0.

Il mio codice è simile al seguente:

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

Spero che mi può dare una mano.

Cheers!

Answer 1

Se non si desidera formattare la struttura dati in gruppi di colonne (che posso capire) allora si può ancora rendere le colonne 3 per fila. Per questo sarà necessario precalcolare un array di helper aggiuntivo per gli indici di riga, ad es. [0,1,2,3]. Il numero degli elementi dell'array deve essere uguale al numero di ion-row che si desidera rendere. Quindi nel tuo funzione di costruzione di controllo si può fare qualcosa di simile:

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

Poi, nel modello che si avrà due ngFor loop:

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

Questo è tutto. In base all'attuale slice slice, la pipe pipe restituisce gli articoli necessari per riga.

Qui è semplificato demo: http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

Answer 2

Vorrei modificare i dati per rappresentare la struttura che si desidera rendere (righe di 3 colonne) e quindi rendere la visualizzazione in base ai dati.

<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

Non dovete fare qualsiasi modifica dei dati! Ionic 2 già fornisce il supporto per questo.

Possiamo usare wrap in <ion-row>. Esempio: <ion-row wrap>

Source

Utilizzare l'attributo capo su un elemento <ion-row> per permettere che gli articoli di fila per avvolgere. Questo vale per lo stile flex-wrap: wrap; per l'elemento .