Я пытаюсь проложить маршрут на основе 2 фильтров, используя параметры запроса, но работает только 1

#angular #firebase #routes #query-parameters #angular-activatedroute

#angular #firebase #маршруты #строка запроса #angular-activatedroute

Вопрос:

Я пытаюсь маршрутизировать на основе категории и размера, URL-адрес маршрутизации изменяется, но маршрутизируется только на основе 2-го фильтра, т.Е.) щелчок бокового фильтра в 1-м фильтре, т.Е.) По категории он изменяет 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;
      }

Ответ №1:

ваша populateProduct() функция, которую вы сначала вызываете applyFilter() , а затем вызываете this.sizeFilter() .Применяется фильтр категорий, но после вызова фильтра размера применяется только фильтр размера.

1. Не могли бы вы уточнить, я пробовал это, но показывает ошибку «Свойство применить фильтр не существует для типа string»

2. проблема в том, что вы вызываете оба фильтра. удалите this.sizeFilter(); ====> Only thse size filter works эту строку, теперь она должна фильтроваться с помощью category

3. Я хочу, чтобы оба фильтра работали, если я удалю эту строку, тогда фильтр размера не будет работать

4. в вашем sizeFilter() вы можете использовать filteredProducts массив, установленный products для фильтрации продуктов. this.filteredProducts = (this.size) ? this.filteredProducts.filter(p => p.size === this.size) : this.filteredProducts;

5. Спасибо, что работает, есть ли какой-нибудь способ, которым я могу использовать оба фильтра одновременно. Теперь происходит то, что он фильтрует либо по категории, либо по размеру. Мне нужно, чтобы это фильтровалось как по категории, так и по размеру