angular - 如何过滤产品价格范围并填充它？

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

结果

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

标签： angularangular6