Angular 2 * ngFor – Elemento de contenedor condicional. Al igual que con el uso de la fila de inicio con tres columnas dentro, a continuación, agregue una nueva fila

Estoy usando *ngFor y me tiene perplejo. Estoy tratando de usar UIkit pero también sería aplicable a Bootstrap.

 

{{ device.name }}

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:

 

{{ device.name }}

...

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.