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.