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

Question

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

基于类别的过滤器 1 不起作用

过滤器 2 基于尺寸的作品和按钮的变化

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;
      }

Answer 1

您populateProduct()首先调用的函数applyFilter()，然后调用this.sizeFilter().Category 过滤器，但在您调用尺寸过滤器后，仅应用尺寸过滤器。