如何按类别筛选项目，在Angular 2或4中使用queryParams [英] How to Filter Items By Category, queryParams in Angular 2 or 4

问题描述

如何获得按类别进行过滤以在带有产品列表的Angular组件上工作? 这是我的产品模型:

How can I get filter by category to work on an Angular component with a list of Products? Here's what my product model looks like:

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

从服务中获取产品如下:

Getting products from the service looks like this:

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

在网址中

我得到了这个结果-search?category=2 使用类别ID更新url后，产品列表仍会返回所有商品列表，而不会仅返回类别ID为2的产品.

in url I got this result - search?category=2 After the url is updated with the category id, the product list still returns all the list of items, it does not return only the products with category id of 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

What do i need to do/add/implement or improve to make the changes in the url (query params), reflect in the list of products? Here's the link to the page i am working on for better understanding of the problem - https://deaninfotech.herokuapp.com/dashboard/ng/search

推荐答案

您需要订阅queryParams中的更改，然后对该订阅运行getProducts().与getProducts相同的组件中，类似于以下内容:

You'll need to subscribe to changes in your queryParams, and run getProducts() on that subscription. Something like the following, in the same component as 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.

Edit to getProducts, per comments.

您得到cannot read "filter" of undefined，是因为您在异步的Promise之后设置了this.products，这是正确的，但是您的过滤器功能不在该异步调用之内.进行如下调整，这应该使您可以将该函数保留在构造函数中.

You're getting cannot read "filter" of undefined since you're setting this.products after the promise asynchronously, which is correct, but your filter function is not within that async call. Adjust as follows, which should allow you to keep the function above in your constructor.

// 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 2或4中使用queryParams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！