con la siguiente funcion logro filtrar solo por un campo input que es el nombre de producto:
ngAfterViewInit(): void {
this.articulosFiltrado$ = combineLatest(
this.apiArticulo.getArticulos(),
this.nombreProducto.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
this.categoriaSelect.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
).pipe(
map(([list, name]) => {
let nameTerm: string = name.trim().toLowerCase();
const completeList: articulo[] = [...list.data];
let filteredByName: articulo[] = [];
filteredByName = completeList.filter(item => {
if (name === '') return true;
return item.nombreProducto.toLowerCase().includes(nameTerm);
}).concat()
return filteredByName
}),
tap(res => {
this.productsDataSource.data = res;
})
)
}
el caso es que quiero usar combineLatest para utilizar varios filtros a la vez sobre la tabla de articulos. Ademas del input nombre de producto de arriba tengo un mat select de categoria, pero no logro unificar ambos:
ngAfterViewInit(): void {
this.someRef.focus();
this.articulosFiltrado$ = combineLatest(
this.apiArticulo.getArticulos(),
this.nombreProducto.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
this.categoriaSelect.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
).pipe(
map(([list, name]) => {
let nameTerm: string = name.trim().toLowerCase();
const completeList: articulo[] = [...list.data];
let filteredByName: articulo[] = [];
filteredByName = completeList.filter(item => {
if (name === '') return true;
return item.NombreProducto.toLowerCase().includes(nameTerm);
}).concat()
let idC: number = this.categoriaSelect.value;
let filteredbyCategory: articulo[] = [];
filteredbyCategory = completeList.filter(item => {
return item.Id_categoria==idC;
}).concat()
return filteredbyCategory
}),
tap(res => {
this.productsDataSource.data = res;
})
)
}
es decir si devuelvo filteredbyCategory solo filtra por categoria, y sino solo por nombre, no se que me esta faltando hacer en el codigo.
Edito: asi quedo mi codigo actual:
this.articulosFiltrado$ = combineLatest(
this.apiArticulo.getArticulos(),
this.nombreProducto.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
this.categoriaSelect.valueChanges.pipe(
startWith(''),
debounceTime(300)
),
).pipe(
map(([list, name]) => {
let nameTerm: string = name.trim().toLowerCase();
const completeList: articulo[] = [...list.data];
let filteredByName: articulo[] = [];
filteredByName = completeList.filter(item => {
if (name === '') return true;
return item.NombreProducto.toLowerCase().includes(nameTerm);
}).concat()
let idC: number = this.categoriaSelect.value;
let filteredbyCategory: articulo[] = [];
filteredbyCategory = filteredByName.filter(item => {
return item.Id_categoria===idC;
}).concat()
return filteredbyCategory
}),
tap(res => {
this.productsDataSource.data = res;
})
)
Como veran filteredByCategory que es el filtro de categoria es el array resultante de filtrar el array completo por el nombre, osea es un filtro sobre otro filtro. Pero la tabla aparece vacia y debo seleccionar una categoria para filtrar por nombre.
this.categoriaSelect.value
y además de eso, a la suscripción le pasas solo un array con dos valores, cuando en el combinelatest tienes tres? Veo cosas raras ahí.