Question

我有一个角度分量，其中有3个过滤器（类别，等级和价格），选择这些过滤器时，我只需要显示适当的数据，所以我创建了一个Pipe并传入了所有三个选定值。实际上，我的类别过滤器工作正常，但其他两个过滤器（评级和价格）无法正常工作。

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

我们有2个过滤器：对于外部列表和内部列表，让我将其分为lsof -i :7474和allBusinessFilterBy: {category?: string}。

businessFilterBy: {rating?: number; price?: string;}

Answer 2

相对于rating或price进行过滤，我不确定您说的是什么意思我只需要显示适当的数据。我想你想

如果allBusiness数组中的所有条目都不包含指定的business和rating，则过滤/排除price中的项目。
输出/包含一个项目（如果包含），则在其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()获取符合您条件的数组中的第一项。如果没有符合条件的项目，则返回undefined。

另一方面，

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

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

Json数据：

FilterPipe.ts：

2 个答案: