如何按类别过滤项目，Angular 中的 queryParams 2 或 4

Question

如何按类别筛选以处理包含产品列表的 Angular 组件？这是我的产品模型的样子：

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

而Query Params是这样写的：

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

在 url 我得到了这个结果 - search?category=2 在 url 使用类别 ID 更新后，产品列表仍然 return 所有项目列表，而不是 return 只有类别 ID 为 2 的产品。

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

我需要 do/add/implement 或改进什么才能使 url（查询参数）中的更改反映在产品列表中？这是我正在处理的页面的 link，以便更好地理解问题 - https://deaninfotech.herokuapp.com/dashboard/ng/search

Answer 1

您需要订阅 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() {}
}

根据评论编辑为 getProducts。

你得到 cannot read "filter" of undefined 因为你在 promise 之后异步设置 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);
    }
}

如何按类别过滤项目，Angular 中的 queryParams 2 或 4

How to Filter Items By Category, queryParams in Angular 2 or 4

query-parameters

angular