Angular 6多场滤波器 [英] Angular 6 multi field filter

问题描述

我目前正在开发angular 6应用.我有大量的文章清单，并希望对其进行一些过滤.现在它可以实时工作，没有按钮可以提交过滤器选项，所有这些都在您键入时发生.我想出了一种方法，但是仍然可以解决一些问题，但是不喜欢我的方法.我敢肯定，必须有一些更优雅的东西.

I'm currently working on angular 6 app. I have a huge list of articles and want to do some filtering upon it. Right now it works real-time, there is no button to submit your filter options, it all happens as you type. I figure a way, but it has still some issues I can fix, but doesn't like the way I did it. I'm sure, there has to be something more elegant.

为了更好的想象，这些文章具有类别，标题，作者，标签.我可以按照类别说来过滤它们，但是我想做某种过滤.

For better imagination those articles have category, title, author, tags. I am able to filter them according to category lets say... but I want to do some kind of filtering.

示例:过滤运动"类别中的所有文章，然后从已过滤的数组中过滤标题中具有子字符串目标"的所有文章，然后过滤作者为约翰"的那些人，然后使用标签曲棍球"过滤所有文章.

Example: Filter all articles from category 'sports', then filter all articles having substring 'goal' in title from that already filtered array, then filter those whos author is 'john' and then filter all with tag 'hockey'.

我最终得到了大量的IF语句，这不是我会说的正确方法.您能推荐我一些更好的方法吗?

I ended up with huge amount of IF statements, which is not the right approach I would say. Can you please recommend me some better way to do this?

推荐答案

这是创建没有许多if语句的多重过滤器的方法.

This is what you could do to create a multifilter without many if statements.

第一步: 创建一个执行各种比较功能的对象:

Step one: Create an object that performs various comparison functions:

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

第二步: 创建具有以下参数的函数:

Step two: Create a function that has the following parameters:

1. 键-您要过滤的记录字段的键.
2. value-您要作为过滤依据的值
3. compareFn-用于此字段的比较函数

此函数返回执行条件的函数.

This function returns a function that executes the condition.

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

第三步: 用条件"函数创建一个表示您的过滤器值的数组:

Step three: Create an array with "condition" functions representing your filter values:

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

第四步: 通过为每个条目调用条件函数数组并评估每个条件的结果来过滤记录:

Step four: Filter your record by calling your array of conditions functions for each entry and evaluating the result of each condition:

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

完整的示例代码:

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

let dataset = [
    {
        category: "sports",
        title: "goal goal goal",
        author: "john",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "news",
        title: "bla bla",
        author: "Timo",
        tags: ["news"]
    },
    {
        category: "news",
        title: "blub blub",
        author: "alex",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "sports",
        title: "Kölner Haie bla bla",
        author: "Timo",
        tags: ["hokey", "ice-hokey"]
    }
]

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

//console.log(filterArray)

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

console.log(result)

这篇关于Angular 6多场滤波器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！