Angular 5 - 多个管道过滤器在对象数组中不起作用

Question

i有一个angular组件，该组件具有3个过滤器（类别，评分和价格），并且在选择这些过滤器时，我只能显示适当的数据，因此我创建了一个管道并通过了所有三个选定的值。实际上，我的类别过滤器工作得很好，但其他两个过滤器（评级和价格）无法正常工作。

Json数据：

"allBusiness": [    
        {
            "category": "XYZ",
            "description": "something something",
            "business": [
             {
                "type": "Store",
                "rating": 4,
                "price" : "$"
             },
             {
                "type": "Store",
                "rating": 3,
                "price" : "$"
             },
             {
                "type": "Store",
                "rating": 5,
                "price" : "$$"
             }           
             ]

        },
        {
            "category": "ABC",
            "description": "Testing",
            "business": [
             {
                "type": "Online",
                "rating": 3,
                "price" : "$"
             },
             {
                "type": "Store",
                "rating": 2,
                "price" : "$"
             },
             {
                "type": "Store",
                "rating": 1,
                "price" : "$$"
             }           
             ]

        }
]

FilterPipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(allBusiness: any[], selectedCategory: string, selectedRating: number, selectedPrice: string): any {
    if (allBusiness && allBusiness.length){
        return allBusiness.filter(item =>{
            if (category && item.category.indexOf(selectedCategory) === -1){
                return false;
            }
            if (rate && item.business.filter(rt => rt.rating != selectedRating)){ //tried filter, findIndex, some but nothing works
                return false;
            }
            if (price && item.business.find(pr => pr.price != selectedPrice)){ //same here nothing is working
                return false;
            }
            return true;
       })
    }
    else{
        return items;
    }
  }
}

提前致谢。

Answer 1

我有点不确定你说 我必须只显示适当的数据 与按 rating 或 [=13 过滤有关的意思=].我假设你想：

Filter/exclude allBusiness 中的项目，如果其 business 数组中的 none 个条目包含指定的 rating 和 price。
Output/include 一个项目，如果它在其 business 数组中包含至少一个具有指定 rating 和 price.

如果正确，您可以这样做：

return allBusiness.filter(item => 
   (selectedCategory && item.category && item.category.indexOf(selectedCategory) > -1)
   && (selectedRating && item.business && item.business.length > 0 && item.business.find(rt => rt.rating == selectedRating))
   && (selectedPrice && item.business && item.business.length > 0 && item.business.find(pr => pr.price == selectedPrice)))

现在，如果您要过滤 allBusiness，只需要一个条目，其中 business 数组中的所有项目都具有指定的 rating 和 price，你可以这样做：

return allBusiness.filter(item => 
   (selectedCategory && item.category && item.category.indexOf(selectedCategory) > -1)
   && (selectedRating && item.business && item.business.length > 0 && !item.business.find(rt => rt.rating != selectedRating))
   && (selectedPrice && item.business && item.business.length > 0 && !item.business.find(pr => pr.price != selectedPrice)))

注：

find() 获取数组中符合您给它的条件的第一项。如果没有项目符合条件，它 returns undefined.

另一方面，

filter() 为您提供了一个新数组，其中仅包含原始数组中与您提供的条件相匹配的项目。如果没有项目符合条件，它会给你一个空数组。

Answer 2

我们有 2 个过滤器：外部列表和内部列表，让我将其拆分为 allBusinessFilterBy: {category?: string} 和 businessFilterBy: {rating?: number; price?: string;}。

interface BusinessFilterBy {
  rating?: number;
  price?: string;
}

interface AllBusinessFilterBy {
  category?: string;
}


function isNill(item) {
  return item === undefined || item === null || (item !== item);
}

function isBusiness(item, filterBy: BusinessFilterBy) {
  return (isNill(filterBy.rating) || item.rating === filterBy.rating) && (isNill(filterBy.price) || item.price === filterBy.price);
}

function isAllBusiness(item, filterBy: AllBusinessFilterBy) {
  return isNill(filterBy.category) || item.category === filterBy.category;
}

function filterBusiness(item, businessFilterBy: BusinessFilterBy) {
  return [{
    ...item,
    business: item.business.filter(businessItem => isBusiness(businessItem, businessFilterBy))
  }];
}

function transform(allBusiness = [], allBusinessFilterBy: AllBusinessFilterBy = {}, businessFilterBy: BusinessFilterBy = {}) {
  if (!allBusiness && !allBusiness.length) {
    return allBusiness;
  }
  return allBusiness.reduce((acc, item) => [...acc, ...isAllBusiness(item, allBusinessFilterBy) ? filterBusiness(item, businessFilterBy) : []], []);
}

Angular 5 - 多个管道过滤器在对象数组中不起作用

Angular 5 - Multiple pipe filters not working in an array of objects

typescript

angular5

Json数据：

FilterPipe.ts: