Как добиться фильтра по ценовому диапазону в Angular 6?

Question

У меня есть сайт электронной коммерции часов от 20 до 60 долларов. Проект разработан на Angular 6 и Firebase в качестве базы данных.Я хочу отфильтровать товары по ценовому диапазону, то есть до 20, 20-30, 30-40 и т. Д. *

Ниже приведены файлы, используемые для фильтра цен 1. product-fliter.component.html

<div class="list-group">
        <a class="list-group-item list-group-item-action"
        [class.active]="!price" routerLink="/">
          All Price
        </a>
        <a *ngFor="let p of price$ | async" 
        class="list-group-item list-group-item-action"
        routerLink="/" [queryParams]="{ price : p.key}"
        [class.active]="price === p.key">     
              {{p.name}}
        </a>
</div>

product-fliter.component.ts

price$;
  @Input('price') price;

constructor(priceService: PriceService) { 
    this.price$ = priceService.getPrice();
  }

price.service.ts

itemRef : any;

  constructor(private db: AngularFireDatabase) {}

  getPrice() {
    this.itemRef =  this.db.list('/price').snapshotChanges().pipe
    (map(changes => { return changes.map(c => ({ key: c.payload.key, 
    ...c.payload.val() }));
    }));
    return this.itemRef;  
  }

home.component.ts (здесь я применяю логику флитера)

private populateProducts() { 
    this.productService.getAll().subscribe(products => {
      this.products = products;

      this.route.queryParamMap.subscribe(params => {

          if(params.get('price') || this.price) {
          this.price= params.get('price');
          this.applyFilterPrice();
        } 
      });
    }); 
  }

Ниже приведены изображения для справки Я хочу, чтобы товары фильтровались по их цене.Любые изменения или любые модификации будут хорошо и хорошо.Я хотел бы знать, как работает Ползунок ценового диапазона и его код на Angular 6.

Answer 1

private populateProducts() { 
    this.productService.getAll().subscribe(products => {

      // here is where you can filter
      this.products = products.filter(product => {
         return product.price >= this.minimumPrice
             && product.price <= this.maximumPrice
       });

      this.route.queryParamMap.subscribe(params => {

          // Can you clarify why you use this if conditional ?
          if(params.get('price') || this.price) {
          this.price= params.get('price');
          this.applyFilterPrice();
        } 
      });
    }); 
  }

Я надеюсь, что это было полезно в вашем случае, но имейте в виду, что при этом будут отфильтрованы только продукты на внешнем интерфейсе, у вас все еще будут загружаться все продукты из firebase.