0

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.

1 respuesta 1

0

Ya lo resolví. Era una tontería y no entiendo como no me di cuenta. El problema estaba en la función recuperarMesesDeEsteAnio():void en el year.component.ts. Estaba tratando las listas de forma normal, sincrónica, pero pedía la info mediante observables, es decir, asincrónica, por ello no "existian" en tiempo de ejecución los datos de la lista de meses. La solución fué simplemente modificar la función mencionada antes

private recuperarMesesDeEsteAnio():void{
    this.facturacionService.getListaMeses().
    subscribe((meses) => {
      for(let mes of meses){
        if(mes.idYear == this.year.id){
         this.mesesDeEsteAnio.push(mes);
        }
      }
    })
  }

Lo implementé, lo probé y voilá :)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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