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

这样我就可以将我需要的所有元素排成一行。

更新

感谢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

---

对于任何试图在网格中显示可变数量对象的人，您可能想要查看mat-grid：https://material.angular.io/components/grid-list/overview。（如果该网站无法加载，请尝试在新的隐身窗口中打开。） - HammerN'Songs

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

---

猜测你需要为 index+1 和 index+2 元素进行边界检查。除此之外，它应该可以工作 :) - Matthias247

如果指令可以处理undefined，那就没问题了。否则，你可以为每一行添加一个*ngIf来防止出现问题。 - Teddy Sterne

@TeddySterne，简单告知一下，演示链接无法使用。 - Raman Sahasi

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

---

那会出现错误 - 也就是会产生数组越界错误。 - Matthias247

假设 products 的长度为6。当索引为5时，最后一条语句会发生什么？ - eko

它出问题了。如果长度为2，它将尝试访问索引1*3==3，这显然超出了边界。 - Matthias247

Answer 3

感谢Teddy Sterne的回答。

以下是如何帮助我创建一个每行有7个单元格的日历控件。

<div class="container-fluid">
  <table class="table table-bordered">
    <ng-container *ngFor="let d of data; let i = index" >
      <tr *ngIf="i % 7 === 0">
        <td *ngFor="let x of [i,i+1,i+2,i+3,i+4,i+5,i+6]">
          {{data[x]}}
        </td>
      </tr>
    </ng-container>
  </table>      
</div> 

示例

（注意保留HTML）

https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html

- purvin