产品价格未过滤角度6

Question

我有一些产品是从Firebase中填充的，我想根据其范围过滤产品

以下是文件 1. product-fliter.component

<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="/" (click)="onClick(p.key)"
        [class.active]="price === p.key">     
              {{p.name}}
        </a>
</div> 

1. product-fliter.component.ts

constructor(private productService: ProductService) { }

onClick(p) {
    if(p == '20 - 30') {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
        return product.price >= 20 && product.price <= 30
      });
     });
    } 
   if(p == '30 - 40') {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
          return product.price >= 30 && product.price <= 40
        })
       });
    } if(p == '40 - 50') {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
          return  product.price >= 40 && product.price <= 50
        })
        });
    } if(p == '50 - 60') {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
          return  product.price >= 50 && product.price <= 60
        })
       });
    } if(p == "Above 60") {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
          return  product.price >= 60
        })
       });
    } if(p == "Under 20") {
       this.productService.getAll().subscribe(products => {
        this.products = products.filter(product => {
          return product.price <= 20
        })
        });
    }

  }

///这是我从Firebase获取所有产品的地方 3. product.service.ts

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

屏幕截图以供参考