Estoy usando *ngFor y me tiene perplejo. Estoy tratando de usar UIkit pero también sería aplicable a Bootstrap.
El elemento div class="uk-child-width-expand@s uk-text-center" uk-grid necesita agregarse al comienzo y después de cada tercer elemento algo como i % 3 === 0 es lo que estaba pensando, Simplemente nada de lo que intente lo hará renderizar correctamente. Cualquier idea sería muy recibida.
EDITAR – Necesito tener la vista renderizada como la imagen inferior aquí en lugar de la imagen superior
EDIT 2 – Se agregó la demostración a LINK. Mientras se carga, es como debe verse, funcionando como solo 3 elementos. Si hace clic en los sensores, esta es la forma en que se muestra usando los parámetros * ngIf.
Aquí hay un enfoque que utiliza *ngFor nested para forzar el *ngFor de 3 elementos en un div
Primero necesitarás un getter para dividir tu matriz en tres.
get device_triples(){ let arr = []; let triple= []; for (let i = 1; i <= this.devices.length; i++) { triple.push(this.devices[i - 1]); if (i % 3 === 0) { arr.push(triple); triple= []; } } if(triple.length > 0){ arr.push(triple); } return arr; }
Esta función transformará:
[1, 2, 3, 4, 5, 6] en [[1, 2, 3],[4, 5, 6]] [1, 2, 3, 4, 5] en [[1, 2, 3],[4, 5]] También podrías usar _.chunk para esto.
Luego deberá iterar sobre la nueva matriz en su plantilla, agregar su “div de tres” y luego iterar sobre cada sub matriz, cada uno con un máximo de 3 elementos en:
Solo usa el index que proporciona la directiva
me gusta
*ngFor="let device of devices ; let i = index"
luego en el html solo verifique con *ngIf y agregue su bloque
como
Probaly necesita este enfoque Ng-repeat-start en angular2 – también conocido como repetir múltiples elementos usando NgFor
(en AngularJS 1.x era un par de directivas ng-repeat-start ng-repeat-end , ahora es otro enfoque para el mismo)
Como se propuso en la otra respuesta, almacenar el index con algo como *ngFor="let device of devices ; let i = index" le permitirá hacer un seguimiento del índice en la colección sobre la que está iterando.
Luego, hasta donde entiendo que necesita correctamente, desea aplicar condicionalmente una class a los elementos, a saber, el primero y el tercero. Si realmente quieres una serie como T,F,F,T,F,F,T,F,F,T,... entonces puedes usar i % 3 === 0 para producirla y aplicar una class condicionalmente con algo como
Esto le permitirá agregar condicionalmente una clase al primer y al tercer elemento después.
Si, por el contrario, desea tener un html diferente según el índice, entonces debe usar ngIf branching y tener dos fragmentos de ngIf html para manejar los dos casos. Algo en las líneas de:
first case second case
@ChristopherMoore tiene una gran respuesta, pero necesita modificar la función devices_triple para agregar una statement para verificar
if (i == this.devices.length){ arr.push(triple); }
esto ayudará en casos como [[1, 2, 3], [4, 5]] y [[1, 2, 3], [4, 5, 6], [7]]
Si está utilizando Bootstrap V4.0, el siguiente enlace es útil.
Cómo crear una nueva fila de tarjetas usando ngFor y bootstrap 4
En mi caso, funciona para mí ya que estoy usando Bootstrap V4.