Skip to main content
se añadieron 1452 caracteres en el cuerpo
Origen Enlace
Caruso
  • 921
  • 15
  • 28

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.

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.

Origen Enlace
Caruso
  • 921
  • 15
  • 28

Como concatenar filtros con combineLatest en Angular

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.