Tengo una lista de trabajos que quiero mostrar dentro <ion-row> . Cada fila puede contener un máximo de dos trabajos. Cada trabajo está envuelto dentro de una etiqueta <ion-col> .
<ion-row> <ion-col width-50 class="job-item">Job A</ion-col> <ion-col width-50 class="job-item">Job B</ion-col> </ion-row>Necesito poder recorrer los trabajos:
<ion-row> <ion-col *ngFor="let job of jobs" width-50 class="job-item">{{ job.name }}</ion-col> </ion-row> Pero el problema con esto es que todos los trabajos se muestran dentro de la misma etiqueta <ion-row> .
En su lugar, necesito algo como este pseudocódigo:
<ion-row> <ion-col>1</ion-col> <ion-col>2</ion-col> </ion-row> <ion-row> <ion-col>3</ion-col> <ion-col>4</ion-col> </ion-row> <ion-row> <ion-col>5</ion-col> <ion-col>6</ion-col> </ion-row> <ion-row> <ion-col>7</ion-col> </ion-row>¿Cómo puedo conseguir esto? ¿Presumiblemente haciendo uso de números pares/impares?
crear una tubería que hace la división:
@Pipe({ name: "row" }) export class RowPipe implements PipeTransform { // input is an array of any // mod is the modulo, every mod items, create a row transform(input: any[], mod: number): any[][] { return input.reduce((previous, next, index) => { if (index % mod === 0) previous.push([next]); else previous[previous.length - 1].push(next); return previous; }, <any[][]>[]); } }después :
<ion-row *ngFor="row of jobs|row:2"> <ion-col *ngFor="let job of row" width-50 class="job-item">{{ job.name }}</ion-col> </ion-row>La mejor manera de hacer esto es transformando la estructura de su matriz de jobs para que sea una matriz de matrices. Entonces la estructura que quieres es fácil:
<ion-row *ngFor='let row of jobRows'> <ion-col *ngFor="let job of row">{{ job.name }}</ion-col> </ion-row>El lugar donde realice la transformación depende principalmente de su aplicación, pero podría hacerlo en una tubería:
@Pipe({ name: 'toRows' }) export class ToRowsPipe implements PipeTransform { transform<T>(value: T[], perRow: number): T[][] { let rows: T[][] = []; for (let i = 0; i < value.length; i += perRow) { rows.push(value.slice(i, i + perRow)) } return rows; } } <ion-row *ngFor='let row of jobs | toRows:2'> <ion-col *ngFor="let job of row">{{ job.name }}</ion-col> </ion-row>La solución más simple es aplicar *ngFor on y dar el atributo de tamaño según sea necesario. En tu caso, serían 6 ya que el total es 12. Eso crea filas de 2 columnas cada una.
<ion-row> <ion-col *ngFor="let job of jobs" size="6"> {{ job.name }} </ion-col> </ion-row>