0

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.

7
  • 1
    En vez de usar la lista completa para filtrar por categoría, usa la lista previamente filtrada por nombre y aplícale el segundo filtro a esta.
    – akotech
    Commented el 25 dic. 2021 a las 13:22
  • Te suscribes al valuechanges de categoría en el combinelatest pero dentro de la suscripción obtienes el valor con 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í.
    – Benito-B
    Commented el 25 dic. 2021 a las 14:32
  • @akotech funciono pero se inicia con la tabla vacía, tengo que seleccionar una categoría para que aparezcan registros, de que manera podria forzar que aparezcan de entrada todos los registros
    – Caruso
    Commented el 25 dic. 2021 a las 19:57
  • CombineLatest se subscribe a a los distintos observables al mismo tiempo y los agrupa por el ultimo valor de cada uno me parece que ese es el motivo por el cual no aparecen de entrada los registros probaste con otro operador?
    – nestdan
    Commented el 25 dic. 2021 a las 20:59
  • Que seria otro operador? Acabo de editar la pregunta con el codigo actual
    – Caruso
    Commented el 25 dic. 2021 a las 21:25

1 respuesta 1

0

Bueno tal como recomendo @akotech fui filtrando sobre el array filtrado y finalmente logre hacerlo con el siguiente codigo:

  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)
      ),
      this.subCatSelect.valueChanges.pipe(
        startWith(''),
        debounceTime(300)
      ),
      this.nombre_marca.valueChanges.pipe(
        startWith(''),
        debounceTime(300)
      ),
    ).pipe(
      map(([list, name,category,subcategory,marca]) => {
        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 =  category;
        if (category===''){idC=0}

        let filteredbyCategory: articulo[];
        filteredbyCategory = filteredByName.filter(item => {
          if (idC === 0) return true;
          return item.Id_categoria===idC;
          
        }).concat()
  
    
        let idS: number =  subcategory;
        if (subcategory===''){idS=0}

        let filteredbySubCategory: articulo[];
        filteredbySubCategory = filteredbyCategory.filter(item => {
          if (idS === 0) return true;
     
          return item.id_subcategoria===idS;
          
        }).concat()
  
        let idM: number =  marca;
        if (marca===''){idM=0}

        let filteredbyMarca: articulo[];
        filteredbyMarca = filteredbySubCategory.filter(item => {
          if (idM === 0) return true;
    
          return item.Id_marca===idM;
          
        }).concat()
  
       return filteredbyMarca;
      }),
     
   
      
      tap(res => {

        this.productsDataSource.data = res;
      })
    ) 
  
   this.categoriaSelect.valueChanges
    .subscribe(
      categoria => {

     
        //actualizo subcateogrias
        this.changeCategory(categoria);
        this.sc.focus();
        
      }
    )
  
  }

Como veran agregue la subcategoria y la marca. Funcionan todos jutos los filtros.

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.