Использование индекса Angular2 ngFor

У меня есть этот код:

<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

Благодаря Тедди Стерну я закончил это решение:

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

Ответ 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>

демонстрация

Ответ 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 будут потеряны, в этом он также будет показан.

И он создаст дополнительные чистые теги div для индекса% 3, если вы проверите элемент и проверите, потому что он будет прокручивать каждый продукт, а div будет повторяться независимо от его индекса% 3 или нет.

Ответ 3

Спасибо Тедди Стерну за ответ.

Вот как это помогло мне создать элемент управления календаря, имеющий 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>

DEMO

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