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:
No logro crearla, me sale como si fuera una lista vertical de una columna.
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.
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