Angular 6 多场过滤器

2022-01-19 00:00:00 filtering frontend javascript angular

我目前正在开发 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. key - 要过滤的记录字段的键.
  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)

相关文章