Zliczanie w ngFor - Angular 2

Question

Mam problem z liczeniem pętli ngFor w Angular 2. Próbuję utworzyć siatkę, która ma 3 kolumny i dynamiczną liczbę wierszy. Chciałbym przechodzić przez moją tablicę i dodawać elementy od lewej do prawej, a co trzy elementy powinny przeskakiwać do następnego wiersza. Korzystam z Ionic Framework 2.0.

Mój kod wygląda następująco:

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

Spodziewać się można mi pomóc.

Pozdrawiam!

Answer 1

Jeśli nie chcesz formatować struktury danych w grupy kolumn (co rozumiem), nadal możesz wyświetlać kolumny 3 w wierszu. W tym celu należy wstępnie obliczyć dodatkową tablicę pomocniczą indeksów wierszy, np. [0,1,2,3]. Liczba elementów w tablicy powinna być równa liczbie ion-row, którą chcesz renderować. Więc w funkcji konstruktora kontroler można zrobić coś takiego:

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

Następnie w szablonie będzie mieć dwie pętle: 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> 

to wszystko. W zależności od bieżącego odcinka indeksu wiersza renderuje niezbędne elementy w wierszu.

Tutaj jest uproszczone demo: http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

Answer 2

Zmodyfikuję dane tak, aby reprezentowały strukturę, którą chcesz renderować (wiersze 3 kolumn), a następnie renderują widok zgodnie z danymi.

<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

Nie trzeba robić żadnych zmian w danych! Ionic 2 już zapewnia wsparcie.

Możemy użyć wrap w <ion-row>. Przykład: <ion-row wrap>

Source

pomocą atrybutu zawijanie elementu <ion-row> aby umożliwić przedmiotów w tym rzędu do zawijania. Dotyczy to stylu flex-wrap: wrap; do elementu <ion-row> .