我正在尝试使用查询参数基于2个过滤器进行路由，但是只有1个有效

问题描述

我正在尝试根据类别和大小进行路由，路由网址会更改，但仅基于第二个过滤器进行路由，即侧面过滤器在第一个过滤器中单击，即按类别，它会更改网址，但不会路由

Filter 1 based on category doesnt work

filter 2 based on size works and changes in buttons

app.component.ts

    private populateProduct(){
        this.productService
          .getAll()
          .switchMap(products => {
            this.products = products;
            return this.route.queryParamMap;
          })
          .subscribe(params => {
            this.category = params.get('category')
            this.applyFilter()
            this.size = params.get('size')
            this.sizefilter();   ====> Only thse size filter works
          })
      }
    
      private applyFilter() {
        this.filteredProducts = (this.category) ?
        this.products.filter(p => p.category === this.category) :
        this.products;
        
      }
      private sizefilter(){
        this.filteredProducts = (this.size) ?
        this.products.filter(p => p.size === this.size) :
        this.products;
      }

解决方法

您的populateProduct()函数首先调用applyFilter()，然后调用this.sizeFilter()。应用了类别过滤器，但是在调用大小过滤器之后，仅应用了大小过滤器。