1

Quiero que cuando liste las imagenes por un ngFor, la imagen del medio siempre tenga este efecto como mas abajo, ya lo tengo echo en el css pero nose como hacerlo con un ngfor o nose si es posible.

Asi que lo tube que hacer de esta forma:

<div class="row">
            <div class="col-md-4">
                    <img [src]="producto[0]?.image?.url" >
            </div>
            <div class="col-md-4 ">
                <div class="middle">
                    <img  [src]="producto[1]?.image?.url">  
                </div>
            </div>
            <div class="col-md-4"> 
                    <img  [src]="producto[2]?.image?.url" >  
            </div>
  </div>

Esto es lo que quiero lograr: (si fueran 6 elementos)

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

5
  • Perdón , no aclare, esto es con angular
    – novatox
    Commented el 3 sept. 2021 a las 11:10
  • 2
    Lo has aclarado con las etiquetas, no te preocupes Commented el 3 sept. 2021 a las 11:18
  • 1
    No me queda claro cómo debería verse si hay más o menos elementos. Si quieres usar un ngFor supongo que es porque puede que haya 3 elementos o puede que haya 5. ¿Qué pasa en este caso? Commented el 3 sept. 2021 a las 11:19
  • Claro , sory, mira si usaria un ngfor habria mas elementos, por ejemplo mi pregunta seria que pasa si hay mas de 20 elementos, bueno ahi no sabria como hacer con un ngfor pero si de esta forma producto[1] ... producto[20] bueno ahi funcionaria, pero no es lo que quiero, imaginate si hay seis elementos (en ese caso la imagen del medio tendria que verse asi)
    – novatox
    Commented el 3 sept. 2021 a las 11:35
  • ahi edite y lo aclare
    – novatox
    Commented el 3 sept. 2021 a las 11:42

1 respuesta 1

3

Puesto que tienes filas de hasta 3 elementos, creo que lo más sencillo sería adaptar la lista de elementos para que la vista itere fácilemente sobre ellos. Asumo que tienes una propiedad producto que es un array de elementos, podrías hacer algo como crear una matrix de 3 * (n/3):

trios : Producto[][]; //lo declaramos en el componente

... obtenemos los productos

this.trios = this.producto.reduce((matriz,elem) => {
  let fila = matriz[matriz.length - 1]
  if (fila.length === 3) {
    fila = [];
    matriz.push(fila);
  }
  fila.push(elem);
  return matriz;
}, [[]]); // valor inicial: un array con una fila vacía

Entonces puedes iterar con cada fila, sabiendo que al menos tendrá un elemento:

    <div class="row" *ngFor="let row of trios">
            <div class="col-md-4">
                    <img [src]="row[0].image?.url" >
            </div>
            <div class="col-md-4" *ngIf="row[1]">
                <div class="middle">
                    <img  [src]="row[1].image?.url">  
                </div>
            </div>
            <div class="col-md-4" *ngIf="row[2]"> 
                    <img  [src]="producto[2].image?.url" >  
            </div>
   </div>
1
  • Muchas gracias!
    – novatox
    Commented el 3 sept. 2021 a las 12:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.