如何过滤产品价格范围并进行填充？

Question

我在Angular 6和Firebase中有一个电子商务项目。还可以从Firebase检索数据并创建价格范围。我还能够根据价格范围过滤产品并在控制台上获得输出，但无法在视图中填充产品

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

我在控制台中获得产品信息，但未在视图中填充

home.component.ts

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

//这里是产品的填充和展示

private populateProducts() { 

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

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

          this.category = params.get('category');
          this.applyFilterCategory();
        if(params.get('gender') || this.gender) {
          this.gender = params.get('gender');
          this.applyFilterGender();
        }if(params.get('shape') || this.shape) {
          this.shape = params.get('shape');
          this.applyFilterShape();
        }
      });
    }); 
}

//这里的方法叫做

async ngOnInit() { 
    this.populateProducts();  
}

结果

如您所见，我正在控制台中获取产品信息，但未在视图中显示。任何建议都欢迎。