Angular 管道过滤器与 JSON 一起使用答案

【问题标题】：Angular pipe filter use with JSONAngular 管道过滤器与 JSON 一起使用
【发布时间】：2018-02-02 18:51:51
【问题描述】：

我的问题是我想在放置名称过滤器的地方使用年份过滤器。

import { PipeTransform, Pipe } from '@angular/core';

import {index} from './index';

@Pipe({
    name:'bookFilter',
})

export class BookFilterPipe implements PipeTransform

{

    transform(value:index[],filterBy:any):index[]
    {
        filterBy=filterBy?filterBy.toLocaleLowerCase():null;
        return filterBy?value.filter((book:index)=>  

        book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1):value  
        // here I want to use year filter in that line.
    }
}

【问题讨论】：

所以你在代码示例中使用book.year 而不是book.Name？问题是什么？
另外请注意，使用管道进行过滤通常不是一个好主意。在此处查看文档：angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
是的，我使用了 book.year，但在那之后我可以放什么？
// book.Year.toFixed().indexOf(filterBy)!==-1):value

标签： angular angular2-forms angular2-services

【解决方案1】：

也许了解这段代码的作用会有所帮助，以便您可以根据需要进行更改。

transform(value:index[],filterBy:any):index[]
{
    filterBy=filterBy?filterBy.toLocaleLowerCase():null;
    return filterBy?value.filter((book:index)=>  

    book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1):value  
    // here I want to use year filter in that line.
}

第一行处理传入的过滤条件。如果设置了 filterBy 变量，它会将其转换为小写。这对于字符串是必需的，以确保匹配不区分大小写。如果未设置 filterBy 变量，则将 filterBy 设置为 null。那是什么？ y : z 语法。如果 x 为真，则为 y，否则为 z。

第二行是使用 JavaScript 过滤功能（您可以在这里找到我们的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter）

它首先重新检查 filterBy 值，因为我们可以在第一行将其设置为 null。它再次使用 x ？ y : z 语法。如果 x 未设置，则执行 z，在这种情况下返回原始值。这是有道理的，因为如果没有 filterBy，您确实希望它返回整个数组。

如果设置了filterBy是，它会在值上调用JavaScript过滤函数，该值是要过滤的数组。过滤器获取数组的每个元素并使用提供的箭头函数进行比较。在这个例子中，箭头函数是：

book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1)

这行代码使用图书的名称属性并将其转换为小写字母以进行不区分大小写的搜索。如果您想检查不同的属性，请在此处指定它。如果您要比较一个数字，则不必将其转换为小写。

箭头函数使用 JavaScript indexOf 函数在提供的属性中定位 filterBy 字符串的位置。在这种情况下，它在 book.Name 中寻找它。您可以在此处找到有关 indexOf 的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

indexOf 返回一个数值，标识它在哪里找到了 filterBy 字符串，如果没有找到，则返回 -1。

我们并不关心它是在字符串中的什么位置找到的，我们只关心它是 !== 到 -1。

这就是这段代码的情况。

希望这将使您可以根据需要更轻松地对其进行修改。

但请注意：强烈建议您不要使用管道来执行过滤。

我有一个示例，说明如何使用与上述类似的语法在不使用管道的情况下进行过滤：Custom pipe to sort array of array

【讨论】：