你能在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;"

然后,您可以在*ngIf内部引用该索引*ngFor以显示您的新行:

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