您可以在Angular 2中使用ngFor與模數運算符

Question

我正在將圖像寫出到網頁中。每三張圖片我想開始一個新的行。角2是否支持這個？

Answer 1

您可以通過以下方式實現：

<div *ngFor="let t of temp(math.ceil(arr.length/3)).fill(); let i = index" class="row"> 
    <div *ngFor="let item of arr.slice(3*i,3*i + 3);" class="item"> 
    {{item}} 
    </div> 
</div> 

而在你的組件：

export class App { 
    temp = Array; 
    math = Math; 
    arr= [1,2,3,4,5,6,7,8,9,10,11]; 
} 

這裏的工作從兩個答案Plunker

Answer 2

您可以從*ngFor訪問迭代的指數，像這樣：

*ngFor="let x of container; let i = index;"

之後就可以引用在*ngFor內的*ngIf該指數顯示您的新行：

<div *ngIf="i%3 === 0">

Answer 3

借款，而是靠在更多Alex的，這裏是我如何完成它ng2（V2.0.1）。

<template ...已棄用。你在哪看到<template ...你應該在v5之後使用<ng-template ...。

<template ngFor let-peer [ngForOf]="peers" let-p="index" let-last="last"> 
    <div class="row" *ngIf="p % 2 === 0"> 
    <div class="col-xs-8 col-sm-6"> 
     <label><input type="checkbox" ...&nbsp;{{peers[p].name}}</label> 
    </div> 
    <div class="col-xs-8 col-sm-6" *ngIf="!last"> 
     <label><input type="checkbox" ...&nbsp;{{peers[p+1].name}}</label> 
    </div> 
    </div> 
</template> 

請注意，雖然我從集合let-peer [ngForOf]="peers"，我沒有具體使用它。相反，我使用集合和索引let-p="index"，根據需要添加到索引，例如peers[p]和peers[p+n]。

根據需要調整模量。最後一行應檢查以確保第一列到最後一列不是迭代器中的最後一個項目。