Sử dụng Angular2 ngFor index

Question

tôi có mã này:

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

tôi đã tự hỏi là có cách nào tôi có thể nhận được sản phẩm từ mảng trong xô? Một cái gì đó như thế này:

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

Bằng cách đó tôi có thể có tất cả các yếu tố tôi cần liên tiếp

UPD

Nhờ Teddy Sterne tôi đã kết thúc với giải pháp này:

<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

Đối với chỉ mục, hãy thử:

Co ntroller file add chức năng:

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

Trong bạn xem file:

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

này sẽ làm việc cho tất cả các số, không chỉ% 3 con số.

Giải pháp @Teddy Sterne sẽ hoạt động trong trường hợp số là% 3 Nếu chúng tôi có 8 sản phẩm, nó sẽ hiển thị chỉ 6 cuối cùng 2 sẽ bị mất, trong đó nó cũng sẽ được hiển thị.

Và nó sẽ tạo thêm thẻ div trống để không chỉ số% 3, nếu bạn kiểm tra phần tử và kiểm tra, vì nó sẽ lặp qua từng sản phẩm và div sẽ lặp lại bất kể chỉ số% 3 hay không.

Answer 2

Góc không cung cấp chức năng này ra khỏi hộp. Tôi nghĩ rằng cách đơn giản nhất để đạt được kết quả mong muốn là để hiển thị dữ liệu duy nhất trên tất cả các chỉ số thứ ba như vậy:

<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