代码之家 › 专栏 › 技术社区 › mayorsanmayor

如何在Angular 2或4中按类别、查询参数筛选项目

query-parameters angular

3

mayorsanmayor · 技术社区 · 7 年前

以下是我的产品模型:

 export interface Product {
    id: number;
    categoryId: number;
 }

从服务中获取产品如下所示:

// Products from the API 
  getProducts(categoryId?: number): void {
    if (categoryId) {
      this.productService.getProducts()
        .then(products => this.products = products);
        this.products.filter((product: Product) => {
          product.categoryId === categoryId;
        });
    } else {
      this.productService.getProducts()
        .then(products => this.products = products);
    }
  }

filterProducts(category: Category) {
  this.router.navigate(['/search'], 
    {queryParams: { category: category.id } });
}

在url中,我得到了这个结果- search?category=2

<ul class="dropdown-menu dropdown-menu-right">
  <li *ngFor="let category of categories">
    <a (click)="filterProducts(category)">
      {{ category.name }}
    </a>
  </li>
</ul>

我需要做什么/添加/实现或改进以使url(查询参数)中的更改反映在产品列表中? 这是我为更好地理解这个问题而开发的页面的链接- https://deaninfotech.herokuapp.com/dashboard/ng/search

1 回复 | 直到 7 年前

1

2

Jack Koppa 7 年前

queryParams ,然后运行 getProducts() 在那个订阅上。如下所示,在相同的组件中 getProducts

import { ActivatedRoute } from '@angular/router';

//...

@Component({
    //...
})
export class SomeComponent {    
    constructor(
        private activatedRoute: ActivatedRoute
    ) {
        this.activatedRoute.queryParams.subscribe(params => {
            this.getProducts(Number(params['category']));
        });
    }

    //getProducts() {}
}

编辑到 获取产品 ,根据评论。

cannot read "filter" of undefined 因为你正在设置 this.products 在异步承诺之后,这是正确的,但您的过滤器函数不在该异步调用中。如下所示进行调整,这将允许您将上述函数保留在构造函数中。

// Products from the API 
getProducts(categoryId?: number): void {
    if (categoryId) {
        this.productService.getProducts()
            .then(products => {
                this.products = products.filter((product: Product) => product.categoryId === categoryId);
            });        
    } else {
        this.productService.getProducts()
            .then(products => this.products = products);
    }
}