Korzystanie indeks Angular2 ngFor

Question

mam ten kod:

<div class="row list-group"> 
    <div *ngFor="let product of products" > 
    <app-product [product]="product"></app-product> 
    </div> 
</div> 

Zastanawiałem się, czy jest jakiś sposób mogę dostać produkty z tablicy w wiadrach? Coś takiego:

<div class="list-group"> 
    <div *ngFor="products; index+3" > 
    <div class="row"> 
     <app-product [product]="products[index]"></app-product> 
     <app-product [product]="products[index+1]"></app-product> 
     <app-product [product]="products[index+2]"></app-product> 
    </div> 
    </div> 
</div> 

ten sposób mogę mieć wszystkie elementy muszę z rzędu

UPD

Dzięki Teddy Sterne skończyło się z tego rozwiązania:

<div class="list-group"> 
    <div *ngFor="let product of products;let i = index"> 
    <div class="row" *ngIf="i%3===0"> 
     <app-product [product]="products[i]"></app-product> 
     <div *ngIf="products[i + 1]"> 
     <app-product [product]="products[i + 1]"></app-product> 
     </div> 
     <div *ngIf="products[i + 2]"> 
     <app-product [product]="products[i + 2]"></app-product> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Dla indeksu spróbuj tego:

Co ntroller funkcja dodawania pliku:

chunks(array, size) { 
    let results = []; 
    while (array.length) { 
    results.push(array.splice(0, size)); 
    } 
    return results; 
}; 

W obejrzeć plik:

<div *ngFor="let chunkProduct of chunks(products,3);" > 
    <div class="row"> 
     <app-product *ngFor="let product of chunkProduct" [product]="product"></app-product> 
    </div> 
</div> 

to będzie działać dla wszystkich, nie tylko liczby% 3 numery.

rozwiązanie @Teddy Sterne'a zadziała okrywać liczby to% 3 Jeśli mamy 8 produktów pokaże tylko 6 Ostatnia 2 zostaną utracone, w tym będzie to również być pokazane.

I stworzy dodatkowe puste znaczniki div dla indeksu% 3, jeśli sprawdzasz element i sprawdzasz, ponieważ będzie on przechodził przez każdy produkt, a element div będzie się powtarzać, niezależnie od tego, czy jego indeks% 3, czy nie.

Answer 2

Angular nie zapewnia tej funkcjonalności po wyjęciu z pudełka. Myślę, że to najprostszy sposób, aby osiągnąć pożądany rezultat jest tylko tych danych, na co trzecim indeksem tak:

<div class="list-group"> 
    <div *ngFor="let p of products; let idx = index" > 
    <div class="row" *ngIf="idx % 3 === 0"> 
     <app-product [product]="products[idx]"></app-product> 
     <app-product [product]="products[idx+1]"></app-product> 
     <app-product [product]="products[idx+2]"></app-product> 
    </div> 
    </div> 
</div> 

Demo