使用Angular2 ngFor指數

Question

我有這樣的代碼：

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

我想知道有沒有什麼辦法可以從水桶陣列產品？事情是這樣的：

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

這樣我可以有我在一排需要

UPD

由於泰迪斯特恩我結束了這個解決方案的所有元素：

<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

索引請試試這個：

Co ntroller文件添加功能：

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

在您查看文件：

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

這將爲所有號碼，不僅％3號工作。

@Teddy Sterne的解決方案將工作的數量是％3如果我們有8個產品，它會顯示只有6個最後2將丟失，在這也會顯示。

如果您檢查元素並檢查，它會爲非％3索引創建額外的空白div標籤，因爲它將循環遍歷每個產品，並且無論索引是否爲％3，div都會重複。

Answer 2

Angular不提供此功能。我認爲，要達到預期的效果最簡單的方法是將每月的第三個指標只顯示數據，像這樣：

<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