0

Tengo un problema de ejecucion que me impide mostrar los datos de una grilla como corresponde.

El problema se suscita a partir de la forma que un subscribe se ejecuta.

Tengo un metodo que recorre una lista de Tramites que se mostraran en una grilla historica.

Tengo una listaDeTramites con objetos de tipo tramite que la recorro y en cada recorrido llamo a un metodo que busca Documentos Oficios en el tramite.

private recorrerListaDeTramites(): void {

this.itemsHistoria = new Array<ItemHistoria>();
this.itemsHistoriaFiltrados = new Array<ItemHistoria>();

this.listaDeTramites.forEach(item => {

  this.buscarOficiosTramite(item);

  this.itemsHistoria.push(itemHistoria);
  this.itemsHistoriaFiltrados.push(itemHistoria);


  
});

//Ordenar elementos para caer en la página correcta al buscar
this.itemsHistoriaFiltrados.sort((prev,next)=>prev.numeroOrdenTramite<next.numeroOrdenTramite ? 1: -1);
this.itemsHistoria.sort((prev,next)=>prev.numeroOrdenTramite<next.numeroOrdenTramite ? 1: -1);
 }

El metodo buscarOficiosTramite recibe el objeto Tramite, le saca su ID y lo usa para llamar a un servicio que le retornara un valor true o false (existe o no existen oficios en el tramite).

Despues de ello llama a un metodo setearItemHistoriaConTramite donde le pasa el tramite actual para armar y retornarle una Interfaz de tipo ItemHistoria que sera la que contiene todos los datos (por tramite) que se mostraran en una grilla.

Esa interfaz es seteada al objeto global itemHistoria.

public buscarOficiosTramite(tramite: Tramite) {

this.respuestaGestionOficioService.existeOficios(tramite.id).subscribe(l => {

if(l.existeOficio == true ){

  this.flagOficioResultado = true;

  
  this.itemHistoria = this.setearItemHistoriaConTramite(tramite);

}else{

  this.flagOficioResultado = false;

  this.itemHistoria = this.setearItemHistoriaConTramite(tramite);

}

  });


 }

Mi problema recae en el orden de ejecucion del subscribe, pues en el primer metodo recorrerListaDeTramites, es llamado dentro de un forEach, lo que hace que el servicio se ejecute las n cantidad de Tramites, y luego de ello se ejecuta el codigo dentro del subscribe, lo que al final del ciclo de ejecucion, los array
this.itemsHistoria.push(itemHistoria) y this.itemsHistoriaFiltrados.push(itemHistoria), queden vacios (pues el contenido que necesitan se ejecuta al final de todo y no es lineal).

Existe alguna manera de que el subscribe se ejecute de manera lineal, o sea un registro a uno en vez de consultar todo de una y dejarlo para el final?.

Quizas me propongan meter el push de los array dentro de la ejecucion del subscribe. El gran problema de esto, es que a nivel global el metodo de recorrerListaTramites se llama dos veces al inicio (OnInit y OnChanges), lo que al final del dia, el subscribe se ejecuta el doble de veces dejando para el final un array con el doble de elementos, pues como contaba, el subscribe espera tener todas las llamadas para ejecutar su codigo interior.

Como podria organizar ese codigo?

Saludos y gracias!

1 respuesta 1

0

Primero usa interfaces para tus arrays y declaralos a nivel global dentro del componente.

Genera un contador y haz push a los arrays con la data hasta que el conteo llegue al numero de uds que cuenta.

export class OperationsComponent implements OnInit {

   public itemsHistoria: ItemHistoria[] = [];
   public itemsHistoriaFiltrados: ItemHistoria[] = [];       

   private recorrerListaDeTramites(): void {

     this.listaDeTramites.forEach((item:ItemHistoria, i:number ) => {

      if(i +1 === this.listaDeTramite.length){

        this.buscarOficiosTramite(item);

        this.itemsHistoria.push(itemHistoria);
        this.itemsHistoriaFiltrados.push(itemHistoria);

     } else {
       this.buscarOficiosTramite(item);
     }
   });

}

De pronto puedes pensar en un refactor e incluir el ultimo metodo en un pipe personalizado que puedas usar en el template tipo:

<ul *ngFor="let historia  of itemsHistoria ">
  <li >{{ historia.id | buscarOficiosTramite | async }}</li>
</ul>

Por ultimo: Angular usa el patron de observables en su core, su manera de relaizar peticiones http siempre retorna un observable. Este problema que tienes se puede solucionar de fondo desde el servicio, usando forkJoin() para realizar peticiones desde un array: https://asfo.medium.com/usando-concatmap-mergemap-y-forkjoin-en-angular-para-peticiones-http-c70f65df54af

Espero que te ayude esto.

Happy coding!

Tu Respuesta

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

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