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

感谢Teddy Sterne我最终得到了这个解决方案:

<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

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>

演示