0

En esta aplicacion: https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/avales/formulario-avales/formulario-avales.component.ts

Si accedes al menu Avales>ver/Editar accedes a un listado de Avales que intento filtrar usando un formulario

formulario

En el componente que se abre en esa ruta "filtro-avales.component" monto lo siguiente

componente

Es decir, tengo un formulario con los elementos que usaré para filtrar el dataSource que mando al componente que muestra el listado en si

Al configurar el formulario

 private inicializarFormulario(){
  this.form = this.formBuilder.group(this.formularioOriginal);

  this.form.valueChanges
   .subscribe(
     valores => {
       this.dataSource = this.dataSourceOriginal;
       this.buscar(valores);
    }
   );
  }

En la funcion Buscar hago lo siguiente

 private buscar(valores: any) {
 ....
  valores.tipoAval==0
  ? this.dataSource=this.dataSourceOriginal
  : this.dataSource=this.dataSource.filter(a=>a.tipoAvalId==valores.tipoAval)
  ....
 }

Si depuro veo que pasa por aqui y que el método filter funciona

filter

Pero luego no veo el listado filtrado

Y lo curioso del tema es que ha habido ejecuciones en las que si ha funcionado y otras en las que no. No se si tiene algo que ver con el asincronismo de los observables.

Esto mismo lo hago en Ofertas y aqui me funciona siempre

ofertas

Alguna idea, por favor?

Salu2

2 respuestas 2

2

Creo que el problema lo tienes en la función buscar de filtro-avales.component.ts. En este trozo de código:

    valores.tipoAval==0
      ? this.dataSource=this.dataSourceOriginal
      : this.dataSource=this.dataSource.filter(a=>a.tipoAvalId==valores.tipoAval)

    valores.estadoAval==0
    ? this.dataSource=this.dataSourceOriginal
    : this.dataSource=this.dataSource.filter(a=>a.estadoAvalId==valores.estadoAval)

    valores.avalista==0
    ? this.dataSource=this.dataSourceOriginal
    : this.dataSource=this.dataSource.filter(a=>a.avalistaId==valores.avalista)

    valores.responsable==0
    ? this.dataSource=this.dataSourceOriginal
    : this.dataSource=this.dataSource.filter(a=>a.responsableId==valores.responsable)

    valores.cliente==0
    ? this.dataSource=this.dataSourceOriginal
    : this.dataSource=this.dataSource.filter(a=>a.clienteId==valores.cliente)

Si te fijas si tipoAval tiene valor realiza el filtrado, pero como el siguiente (estadoAval) está sin valor pone en la variable this.dataSource de nuevo todos los valores (this.dataSource=this.dataSourceOriginal).

Habría que hacer algo más de pruebas para comprobar que no "rompe" nada diferente, pero creo que con cambiar todos esos this.dataSource=this.dataSourceOriginal por this.dataSource=this.dataSource te funcionará.

A ver si hay suerte

1

Por lo que veo estas usando Angular Material. La tabla tiene sus defectos, y uno de los peores es el filtrado de la información. A pesar que puedes aplicar un filter a dataSource, deberías aplicarlo en si a dataSource.data puesto que es el método que contiene la información, sin embargo puede no funcionar. Debido a ello se creo filterPredicate() y lo filtrarías así mas o menos

this.dataSource.filterPredicate(a => a.tipoAvalId === valores.tipoAval );

Si te das cuenta eso no crea un arreglo como filter(), si no que internamente la clase filtra los datos, sin perder los otros. Al ser una solo instancia el filterPredicate en la función que pasa como parámetro podrías meter toda tu lógica para que filtre no solo en uno, si no en varios campos.

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.