angular - 如何在 Angular 6 中实现按价格范围过滤？

Question

我有一个 watch 电子商务网站，价格从 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>

1. product-fliter.component.ts

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

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

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

1. 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();
        } 
      });
    }); 
  }

以下图片供引用 我希望按价格过滤产品。任何更改或任何修改都会很好。我想知道 Price Range Slider 的工作原理及其在 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 加载的所有产品。