Skip to main content
2 de 2
se añadieron 358 caracteres en el cuerpo
Caruso
  • 921
  • 15
  • 28

Filtrar mat table por un entero

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.

Caruso
  • 921
  • 15
  • 28