您可以在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]。

根据需要调整模量。最后一行应检查以确保第一列到最后一列不是迭代器中的最后一个项目。