1

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

Resultado a llegar usando group by

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

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.