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

原文由 Constantine 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

演示

原文由 Teddy Sterne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于索引试试这个：

控制器文件添加功能：

 chunks(array, size) {
  let results = [];
  while (array.length) {
    results.push(array.splice(0, size));
  }
  return results;
};

在您查看文件中：

 <div *ngFor="let chunkProduct of chunks(products,3);" >
  <div class="row">
      <app-product *ngFor="let product of chunkProduct" [product]="product"></app-product>
  </div>
</div>

这将适用于所有数字，而不仅仅是 %3 个数字。

@Teddy Sterne 的解决方案将在数字为 %3 的情况下起作用如果我们有 8 个产品，它将仅显示 6 个，最后 2 个将丢失，在此也将显示。

如果您检查元素并检查，它将为非 %3 索引创建额外的空白 div 标签，因为它会循环遍历每个产品，并且无论其索引是否为 %3，div 都会重复。

原文由 Vivek Doshi 发布，翻译遵循 CC BY-SA 3.0 许可协议