Angular 6 多场过滤器

Question

我目前正在开发 Angular 6 应用程序。我有一个庞大的文章列表，想对其进行一些过滤。现在它是实时工作的，没有提交过滤器选项的按钮，这一切都在你输入时发生。我想出了一个办法，但它仍然有一些我可以解决的问题，但不喜欢我这样做的方式。我敢肯定，一定有更优雅的东西。

为了更好地想象这些文章有类别、标题、作者、标签。我可以根据类别过滤它们，比如说......但我想做某种过滤。

示例：过滤“体育”类别中的所有文章，然后从已过滤的数组中过滤标题中包含子字符串“目标”的所有文章，然后过滤作者为“约翰”的所有文章，然后过滤所有带有标签“曲棍球”的文章。

我最终得到了大量的 IF 语句，这不是我想说的正确方法。你能推荐我一些更好的方法吗？

Answer 1

这是您可以在没有很多 if 语句的情况下创建多重过滤器的方法。

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

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

第二步： 创建一个具有以下参数的函数：

1. key - 要过滤的记录字段的键。
2. value - 要过滤的值
3. compareFn - 用于该字段的比较函数

这个函数返回一个执行条件的函数。

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

第三步： 使用代表过滤器值的“条件”函数创建一个数组：

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

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

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)