html - example - ngfor index angular 5

Usando Angular2 ngFor index

Question

Tengo este código:

<div class="row list-group">
  <div *ngFor="let product of products" >
    <app-product [product]="product"></app-product>
  </div>
</div>

Me preguntaba ¿hay alguna manera de obtener productos de la matriz en cubos? Algo como esto:

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

De esa manera podría tener todos los elementos que necesito en una fila

UPD

Gracias a Teddy Sterne terminé con esta solución:

<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 no proporciona esta funcionalidad de fábrica. Creo que la forma más sencilla de lograr el resultado deseado es mostrar solo los datos en cada tercer índice de la siguiente manera:

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

Manifestación

Answer 2

Para el índice prueba esto:

Función de agregar archivo de controlador:

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

En tu vista de archivo:

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

Esto funcionará para todos los números, no solo% 3.

La solución de @Teddy Sterne funcionará en caso de que el número sea% 3 Si tenemos 8 productos, solo se mostrarán 6, se perderán los 2 últimos, en esto también se mostrará.

Y creará etiquetas div en blanco adicionales para el índice no% 3, si inspecciona el elemento y lo revisa, porque pasará por cada producto y div se repetirá sin importar si su índice es% 3 o no.