0

mi duda es la siguiente con angular rescato un arreglo de app 100 items y los muestro en la vista con el ngFor, hasta ahi todo bien pero lo que quiero es que en vez de mostrarse de esta manera

  • item
  • item
  • item

se muestre de este modo (como matriz)

  • item item item item
  • item item item item
  • item item item item

como cuando ven la pag de una tienda y aparecen los productos por filas y columnas en vez de una sola columna de productos ,estoy utilizando bootstrap 4 y angular 4.

de ante mano gracias!

2
  • Podrías agregar algo de tu código? Tu html, tu css/scss? Para ver que estas haciendo mal. En un principio te diría que si usas Boostrap 4, uses tamaños de columa de 3 (entrarían 4 por fila, ya que boostrap maneja tamaño hasta 12 por fila), me explico? Commented el 22 ene. 2018 a las 19:10
  • <div class="row"> <div class="col-md-12"> <table class="striped"> <thead> <tr> <th>Perfil</th> <th>Nombre</th> <th>Correo</th> </tr> </thead> <tr *ngFor="let persona of lstPersonas"> <td>{{ persona.perfil}}</td> <td>{{ persona.nombre}}</td> <td>{{ persona.correo}}</td> </tr> </table> </div> </div> este es mi html Commented el 22 ene. 2018 a las 19:17

1 respuesta 1

0

Dado que utilizas Boostrap, este se basa en un Grid de hasta 12 columnas, por lo tanto puedes dividir tus items en cada columna, de 1 a 12 unidades de ancho. Si cada item ocupa 1 unidad, se verán 12 items por fila, si un item ocupa 12 unidades, sera el único en la fila.

Pequeño ejemplo explicativo:

.col-8{
background-color: yellow;
}
.col-4{
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

<div class="row">
  <div class="col-4">1er columna</div>
  <div class="col-4">2da columna</div>
  <div class="col-4">3ra columna</div>
</div>

Como podrías hacer lo que deseas:

<div class = "row">
    <div class = "col-4" *ngFor= "let item of items">
         //Mostraría 3 items por fila
        <p>{{item.name}}</p>
    </div>
</div>

<div class = "row">
    <div class = "col-3" *ngFor= "let item of items">
         //Mostraría 4 items por fila
        <p>{{item.name}}</p>
    </div>
</div>

Como viste anteriormente puedes modificar el tamaño de la columna y mostrar tantos items como te sea posible.

4
  • Gracias amigo! me sirvio perfectamente, ahora tengo otra preguntilla, es posible colocarle una paginacion? Commented el 22 ene. 2018 a las 20:47
  • De nada, agradecería el voto positivo. Puedes hacer un simple fixs, para que pagine aunque no seria real, a menos que la hagas con backend también, divide items e itera sobre una porción de la misma, cuando pases a la siguiente pagina, cambias el valor de items por la otra porción de datos, me explico? Commented el 22 ene. 2018 a las 21:14
  • soy bastante nuevo en este foro, como hago para darte un voto positivo? Commented el 22 ene. 2018 a las 21:57
  • La flecha hacia arriba (^), a la izquierda de la publicación. Necesitas 15 puntos de reputación (info aquí), hazlo mas adelante. Luego dime si te sirvió la idea de paginacion. Commented el 22 ene. 2018 a las 22:00

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.