0

Estoy desarrollando un proyecto de Angular 7 en el cual tengo que crear una lista de usuarios de tres columnas con sus diferentes atributos, el diseño visual seria el siguiente:

introducir la descripción de la imagen aquí

No logro crearla, me sale como si fuera una lista vertical de una columna.

introducir la descripción de la imagen aquí

Esto es lo que llevo, aclaro soy nuevo en Angular:

politicians.service.ts

 getPolitician(): Observable<any[]> {
    // ['added', 'modified', 'removed']
    return this.politicianCollection.snapshotChanges().pipe(
      map((actions) => {
        return actions.map((a) => {
          const data = a.payload.doc.data();
          return { id: a.payload.doc.id, ...data };
        });
      })
    );
  }

list-diputados.component.ts

    ngOnInit() {
    this.politicians = this.politiciansService.getPolitician();
    this.cargarDatosTabla();
}

  cargarDatosTabla() {
    this.politicians.forEach((poldata) => {

        this.data = poldata;
        this.diputados = this.data.filter(function(dip_fil){
            return dip_fil.tipoPolitico == 'Diputado';
        });

    });

}

list-diputados.component.html

   <nb-layout-column style="background-color: #ffffff">
<table>
  <nb-list>
    <nb-list-item *ngFor="let item of diputados">
      <tr>
        <td>
          <nb-user size="large" [name]="item.name +' '+item.lastName" [title]="item.partidoPolitico"></nb-user>
        </td>
      </tr>
    </nb-list-item>
  </nb-list>
</table>

Estoy usando Nebular es un KIT UI por eso las etiquetas NB.

4
  • 1
    Qué es lo que te falla? el 22 ene. 2019 a las 21:09
  • @PauloUrbanoRivera acabo de agregar la imagen de como se visualiza en mi proyecto actual como una lista de una columna, la idea es visualizarlo como la imagen 1 como una lista de 3 columnas. el 22 ene. 2019 a las 21:21
  • Me percate que estas utilizando nebular para construir tu HTML; lamentablemente nunca he trabajado con esa librería o paquete, por lo que no podría decirte si eso puede ser una causa, sin embargo me percato que no estas utilizando bootstrap el cual puede solucionar rápidamente tu problema el 23 ene. 2019 a las 13:38
  • Gracias Paulo, efectivamente solo fue una cuestion de utilizar los grids bootstrap. el 28 ene. 2019 a las 7:10

1 respuesta 1

0

Puedes incluir Bootstrap tal como lo explica en este enlace. Ya con esto, utiliza el sistema de grid para ajustar los tres elementos por fila:

<nb-list>
  <nb-list-item *ngFor="let item of diputados">
    <nb-user class="col-4" size="large" [name]="item.name +' '+item.lastName" [title]="item.partidoPolitico"></nb-user>
  </nb-list-item>
</nb-list>
1
  • Gracias me ha funcionado, son esos momentos que te bloqueas con algo tan basico. Lo use de la siguiente manera: <div class="col-4" *ngFor="let item of diputados"> porque dentro de la etiqueta del usuario reduce el contenido de la etiqueta <nb-user>. el 28 ene. 2019 a las 7:14

Tu Respuesta

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

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