角度路由与产品过滤器的查询参数

时间:2018-05-09 17:41:47

标签: angular routing

您好我正在尝试使用查询参数,以便它可以过滤我的json数据[因为我正在使用服务]。

<a [routerLink]="['/shop']" [queryParams]="{ type: 'jeans'}">Jeans</a>

我正在尝试从服务中获取数据,但未能这样做。数据采用服务使用的JSON格式。因此,如果用户点击该链接,则应过滤相关的产品类别及其下的数据。

ngOnInit() {
this.productList = this.productservice.getProducts();
this.activatedRoute.queryParams
  .subscribe(queryParams => {
    if (queryParams.type === 'product1') {
       this.productList['productCategory'] == 'Jeans'; /* dont know if its correct*/
    } else if(queryParams.type === 'product2') {
       this.productList['productCategory'] == 'Shirts';
    }
  })
}

从服务获取的数据 -

import { Products } from './products';

export const PRODUCTS: Products[] = [
{
id: 1,
productCat:'product2',
product: [
    {
        prodId: 1a,
        productCategory:'product1',
        productName: 'Prod Desc',
    },
 ],
 },
 {
    id: 2,
    productCategory:'product2',
    product: [
    {
        prodId: 1b;
        productName: 'Trendy Shirts',
    },
  ],
 }
]

1 个答案:

答案 0 :(得分:1)

可能这就是你要找的东西:

let filteredProductList = this.productList.filter(product=> product.productCategory == 'Jeans'); //For getting multiple matching results

let filteredProduct = this.productList.find(product=> product.productCategory == 'Jeans'); //For getting single matching result