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

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

价格服务

home.component.ts （这就是我应用fliter逻辑的地方）

以下是供参考的图片 我希望这些产品能被价格过滤掉。任何改变或修改都是好的。我想知道价格范围滑块的工作原理及其在Angular 6中的代码。

私有populateProducts（）{
this.productService.getAll（）.subscribe（产品=>{
//这里是你可以过滤的地方
this.products=products.filter（product=>{
退货产品.price>=此.minimumPrice
&&产品价格{
//如果有条件的话，你能解释一下为什么要用这个吗？
if（params.get（'price'）| | this.price）{
this.price=params.get（'price'）；
这是applyFilterPrice（）；
} 
});
}); 
}

---

我希望这对您的情况有帮助，但请注意，这样做只会过滤前端的产品，您仍然有从firebase加载的所有产品。

您要求澄清的那行代码是我发现的愚蠢错误…我将按照您的建议尝试代码…谢谢您还可以将

过滤器

移到t订阅之前可以观察到它。@Pranav as@Phix实际上可以使用

.filter

rxjs管道操作符对其进行过滤，但更好的方法是使用firebase查询进行过滤，例如：``db.list（'/products'）.orderByValue（'price'）.startAt（minimumPrice）.endAt（maxiumprice）“``我不是100%这将起作用，因为自从firestore问世以来，我没有使用firebase rtdb作为我的主数据库，但我认为它应该。如何按firebase查询进行过滤？现在过滤工作非常好。现在的问题是如何使用firebase查询按特定顺序对元素进行排序。就像我想按以下方式对元素进行排序：All Price，Under20，20-30，30-40…60以上..有什么建议吗？

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

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

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

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