Compañeros que tal, estoy realizando un reporte con Goup By
en angular 10
, la idea es agrupar por sedes
después por facultades
y por escuelas
teniendo en cuenta la cantidad de varones y mujeres, hasta ahora solo puedo agruparlos por sedes e imprimirlo por consola he seguido la documentación de Uso de Group By - rxjs.
¿Cómo debería usar la segunda agrupación y poder mostrar en component.html
?
estoy usando API / rxjs/operators
para la agrupación
Resultado a llegar, en la parte derecha estaría un botón para ocultar o mostrar el sub-grupo
My component.ts
import { Component, VERSION, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { groupBy, map, mergeMap, reduce } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular ' + VERSION.major;
sedes:any;
ngOnInit() {
of(
{sede:"Lima" , facultad:"INGENIERIA", escuela:"Ing Sistemas", cant_mujeres:10, cant_varones:60},
{sede:"Lima" , facultad:"INGENIERIA", escuela:"Ing Civil", cant_mujeres:30, cant_varones:20},
{sede:"Lima" , facultad:"SALUD", escuela:"Nutricion", cant_mujeres:50, cant_varones:19},
{sede:"Lima" , facultad:"EMPRESARIALES", escuela:"Contabilidad", cant_mujeres:30, cant_varones:5},
{sede:"Piura" , facultad:"INGENIERIA", escuela:"Ing Sistemas", cant_mujeres:20, cant_varones:33},
{sede:"Piura" , facultad:"EMPRESARIALES", escuela:"Contabilidad", cant_mujeres:50, cant_varones:30},
{sede:"Piura" , facultad:"EMPRESARIALES", escuela:"Administracion", cant_mujeres:40, cant_varones:10},
{sede:"Trujillo" , facultad:"SALUD", escuela:"Nutricion", cant_mujeres:30, cant_varones:15}
)
.pipe(
groupBy(p => p.sede, p => p.facultad),
mergeMap(group$ =>
group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
),
map(arr => ({ sede: arr[0], values: arr.slice(1) }))
)
.subscribe(p =>{
this.sedes = p ;
console.log(this.sedes)
} );
}
}
My component.html
<p>
Reporte de escuelas por facultades y sedes
</p>
<table border="1" >
<tr>
<td> Sedes </td>
<td> Facultades </td>
<td> Escuelas </td>
<td> Cant. Mujeres </td>
<td> Cant. Varones </td>
</tr>
<tr>
<td> - </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
El código lo tengo en StackBlitz --> AQUÍ el código