Как отфильтровать ценовой диапазон товара и заполнить его?

Question

У меня есть проект электронной коммерции в Angular 6 и 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();  
}

Результат

Как вы видите, я получаю информацию о продукте в консоли, но она не отображаетсяна вид.Любые предложения приветствуются.