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
    }
}

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

键-您要过滤的记录字段的键。
value-您要作为过滤依据的值
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)

Angular 6多场滤波器

1 个答案: