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

然后，您可以在*ngIf内的*ngFor内引用该索引，以显示您的新行：

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

Answer 3

借鉴两个答案，但更多地依靠亚历克斯，这里是我如何在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]。

根据需要调整模数。最后一行应检查以确保最后一列的第一列不是可迭代中的 last 项。

你能在Angular 2

3 个答案: