Estoy haciendo una app en Angular donde tomo datos de un json. Tengo principalmente 2 componentes. El AccesoTablasComponent; que mediante un array de años (IYear) y con un *ngFor cargo cada objeto IYear en un hijo YearComponent, pasandole al mismo también un array con los objetos meses (IMes) correspondientes a un usuario/guardia, donde, dentro de cada YearComponent, pretendo filtrar el array de meses para sacar solo los meses correspondientes al YearComponent actual. El problema es que en cada YearComponent, en su ngInit, me lee el array de IMes, pero a la hora de querer filtrarlos por el id del año no hace nada. Es como si no quisiera recorrer el array. No comprendo que ocurre.
acceso-tablas.component.html
<app-nav></app-nav>
<div class="container-sm">
<h1 id="titulo">Bienvenido: {{guardia.apellido}} {{guardia.nombre}}</h1>
</div>
<div class="container-sm" *ngFor="let year of yearsOfGuardia">
<app-year
[year]="year"
[meses] = "mesesGuardia"
></app-year>
</div>
acceso-tablas.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IFila } from 'src/app/Interfaces/Ifila';
import { IGuardia } from 'src/app/Interfaces/IGuardia';
import { IMes } from 'src/app/Interfaces/IMes';
import { IObjetivo } from 'src/app/Interfaces/IObjetivo';
import { IYear } from 'src/app/Interfaces/IYear';
import { FacturacionService } from 'src/app/servicios/facturacion.service';
import { GuardiasService } from 'src/app/servicios/guardias.service';
@Component({
selector: 'app-acceso-tablas',
templateUrl: './acceso-tablas.component.html',
styleUrls: ['./acceso-tablas.component.css']
})
export class AccesoTablasComponent implements OnInit {
guardia!: IGuardia;
meses:IMes[] = [];
filas:IFila[] = [];
objetivos:IObjetivo[] = [];
years:IYear[] = [];
yearsOfGuardia: IYear[] = [];
mesesGuardia: IMes[] = [];
constructor(private activaterRoute: ActivatedRoute, private servicioGuardia: GuardiasService, private servicioFacturacion: FacturacionService) { }
ngOnInit(): void {
//Capturo la información (id del guardia) de la URL
const routeParams = this.activaterRoute.snapshot.paramMap;
const guardiaIdDesdeRuta = Number(routeParams.get("guardiaId"));
//Busco el guardia correspondiente al ID capturado
console.log("[AccesoTablasComponent]ID del guardia capturado desde la URL: ", guardiaIdDesdeRuta);
console.log("Guardia: ", this.servicioGuardia.buscarGuardia(guardiaIdDesdeRuta));
this.guardia = this.servicioGuardia.buscarGuardia(guardiaIdDesdeRuta);
//Obtenido el Guardia, busco en la BD los años que le corresponde al mismo
this.servicioFacturacion.getListaYears().subscribe((years)=>{
this.years = years;
this.servicioFacturacion.years = this.years;
if(this.years.length > 0){
console.log("Años recuperados: ", this.years);
this.recuperarYearsDelGuardia(this.years, Number(this.guardia.id));
console.log("Años recuperados del guardia ", this.guardia.apellido," => ", this.yearsOfGuardia);
}
else{
console.log("No se recuperaron años");
}
});
//Busco los meses pertenecientes al guardia
this.servicioFacturacion.getListaMeses().subscribe((meses) => {
this.meses = meses;
this.servicioFacturacion.meses = this.meses;
if(this.meses.length > 0){
console.log("Meses recuperados: ", this.meses);
this.recuperarMesesDelGuardia(this.meses, Number(this.guardia.id));
console.log("Meses recuperados del guardia ", this.guardia.apellido," => ", this.mesesGuardia);
}
else{
console.log("No se recuperaron meses");
}
});
}
private recuperarYearsDelGuardia(years:IYear[], idGuardia:Number):void{
for(let year of this.years){
if(year.idGuardia == this.guardia.id){
this.yearsOfGuardia.push(year);
}
}
}
private recuperarMesesDelGuardia(meses:IMes[], idGuardia:Number):void{
for(let mes of this.meses){
if(mes.idGuardia == this.guardia.id){
this.mesesGuardia.push(mes);
}
}
}
}
year.component.html
<!--Acordeón AÑO-->
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
{{year.year}}
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body" *ngFor="let mes of mesesDeEsteAnio">
<!--Meses-->
<app-tabla-cobro
[mes]="mes"
></app-tabla-cobro>
</div>
</div>
</div>
</div>
year.componetn.ts
import { Component, Input, OnInit } from '@angular/core';
import { IMes } from 'src/app/Interfaces/IMes';
import { IYear } from 'src/app/Interfaces/IYear';
import { FacturacionService } from 'src/app/servicios/facturacion.service';
@Component({
selector: 'app-year',
templateUrl: './year.component.html',
styleUrls: ['./year.component.css']
})
export class YearComponent implements OnInit {
@Input()year: IYear = {
id: 0,
year: 2020,
idGuardia: 0
}
@Input()meses: IMes[] = [];
copiaMeses:IMes[] = [];
mesesDeEsteAnio: IMes[] = [];
constructor() {
}
ngOnInit(): void {
console.log("[YearComponent]Meses: ", this.meses); //En consola me lée los meses que contiene aquí
this.recuperarMesesDeEsteAnio(); //Entra a esta funcion, pero no hace nada
console.log("[YearComponent] Meses recuperados de este año:", this.year.id, " :: ", this.mesesDeEsteAnio); //Y al no hacer nada este console.log me muestra this.mesesDeEsteAnio vacio, cuando debería tener 2 objetos IMes sacados del array this.meses
}
private recuperarMesesDeEsteAnio():void{
for(let mes of this.meses){
if(mes.idYear == this.year.id){
this.mesesDeEsteAnio.push(mes);
}
}
}
}
[Dejo mi github para que revisen todo el código.][1] https://github.com/diegorus92/CalculadoraSueldoGuardias/tree/master/CalculoGananciaGuardia/src/app/tablas/componentes
Saludos.