tengo este codigo:
<div class="row list-group"> <div *ngFor="let product of products" > <app-product [product]="product"></app-product> </div> </div>Me preguntaba, ¿hay alguna forma 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>Angular no proporciona esta funcionalidad lista para usar. Creo que la forma más sencilla de lograr el resultado deseado es mostrar solo 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>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 para %3 números.
La solución de @Teddy Sterne funcionará en caso de que el número sea %3. Si tenemos 8 productos, mostrará solo 6, los últimos 2 se perderán, en este también se mostrarán.
Y creará etiquetas div en blanco adicionales para el índice no %3, si inspecciona el elemento y verifica, porque recorrerá cada producto y el div se repetirá sin importar si su índice es %3 o no.
Gracias Teddy Sterne por su respuesta.
Así es como me ayudó a crear un control de calendario con 7 celdas seguidas
<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>https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html