I've an ecommerce project in Angular 6 and Firebase. The data is also retrieved from firebase and created a price range. I'am also able to filter out products according to price range and getting output at console, but unable to populate it on view

I have following files 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>

Here I am getting the products info in console but not populating on view

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

// Here the products are populating and displayed

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

// Here the method is called

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

Result

enter image description here As you can see I'am getting product info in console but its not displayed on view. Any suggestions most welcome.

0 Answers