0

Hola tengo el siguiente codigo para filtrar una tabla mat-table

export class ArticuloComponent implements OnInit {

   public selcat:categoria={idcategoria:0,nombrecategoria:''};
   public categorias!:any;
   public subcategorias!:any[];
   public categorySelection:any;
   public lstfiltrado!:any[];
   public value2:any;
    public lst!: any;
    public lsts!: any;

    public filtroForm:any;

    public columnas : string[]=["nombreProducto","precio","stock","categoria","subcategoria","marca",'actions'];
    constructor(
      
        private apicategoria : ApicategoriaService,
        private apisubcategoria : ApisubcategoriaService,
        private apiArticulo : ApiarticuloService,
        private dialog:MatDialog,
        public snackBar:MatSnackBar,
      ) {
      
        }
        @ViewChild(MatSort, { static: false }) sort!: MatSort;
        @ViewChild(MatPaginator) paginator!: MatPaginator;
   
        @ViewChild('categoriaSelect') someRef!: MatSelect;
        @ViewChild('subCatSelect') sc!: MatSelect;
        categoriaSelect = new FormControl('');
        subCatSelect = new FormControl('');
        filterValues: any = {
          category: '',
          subcat: ''
        }
        ngAfterViewInit(): void {
          //this.someRef.focus();
        }
        private fieldListener() {
          this.categoriaSelect.valueChanges
            .subscribe(
              categoria => {
                this.filterValues.category = categoria;
                this.lst.filter = JSON.stringify(this.filterValues);
                console.log();
                this.changeCategory(categoria.idCategoria);
              }
            )
          this.subCatSelect.valueChanges
            .subscribe(
              subcat => {
                this.filterValues.subcat = subcat;
                this.lst.filter = JSON.stringify(this.filterValues);
              }
            )
        }
        private createFilter(): (articulo:articulo, filter: string) => boolean {
          let filterFunction = function (articulo:articulo, filter:string): boolean {
            let searchTerms = JSON.parse(filter);
 
            return articulo.idcategoria === searchTerms.category
              && articulo.idsubcategoria === searchTerms.subcat;
          }
      
          return filterFunction;
        }
        clearFilter() {
          this.subCatSelect.setValue('');
          this.categoriaSelect.setValue('');
        }
        changeCategory(event: number) {
        

       
           this.lsts=this.subcategorias.filter(item=>item.idCategoria===event);
      
           this.sc.focus();
        }
        changesCategory(event: number) {
        
        this.lst.filter((item: any)=>item.id_subcategoria===event);
        }
        getcategoria(){

            this.apicategoria.getCategorias().subscribe(resp=>{

            this.categorias = resp.data;
            
          });
          
        }

        ngOnInit(): void {
            

            this.getArticulos();
            this.getcategoria();
            this.getsubcategorias();
            this.fieldListener();
          }
          
          getsubcategorias() {
     
            this.apisubcategoria.getsubcategorias().subscribe(resp=>{

            this.subcategorias = resp.data;
            
            });
           
          }
         
        getArticulos(){

              this.apiArticulo.getArticulos().subscribe(resp=>{

              this.lst = new MatTableDataSource<articulo>(resp.data);

              this.lst.sortingDataAccessor = (item:any, property:any) => {
                return item[property].toLocaleLowerCase();
              };
              this.lst.sort = this.sort;
              this.lst.paginator = this.paginator;
              this.lst.filterPredicate = this.createFilter();
            });
            
          }
          resetFilters() {
          
            this.categorias.filter = "";
          }
        
  }

Es decir tengo dos mat select categoria y subcategoria respectivamente, al seleccionar una categoria se filtran las subcategorias, esto va perfecto. Pero quiero que tambien se filtren los articulos de dicha categoria, y luego al seleccionar la subcategoria se vuelva a filtrarlos articulos. El caso es que el array que me devuelve el servicio es decir los articulos contiene: el idCategoria, y el nombreCategoria, asi como el idsubcateogria y el nombreSubCategoria.

lo que hice fue seguir el tutorial: https://careydevelopment.us/blog/how-to-filter-on-specific-columns-with-filterpredicate-in-an-angular-material-table

Pero no funciona la tabla se vacia al seleccionar una categoria.

1 respuesta 1

0

para hacer eso debes hacer esto.

`

filtrado(event: Event) {
    this.dataSource = this.dataSource = new MatTableDataSource(this.ofertas);

this.dataSource.paginator = // agregar de nuevo el paginador

const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
}
}
1
  • Probe colocar ese codigo pero no funciona, podrias explicar mejor
    – Caruso
    Commented el 27 oct. 2021 a las 15:47

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.