Question

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

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

Answer 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。那是什么x？ 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，你确实希望它返回整个数组。

如果，则会调用值上的JavaScript过滤器函数，即要过滤的数组。过滤器获取数组的每个元素，并使用提供的箭头函数对其进行比较。在此示例中，箭头函数为：

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

这行代码使用了book的name属性，并将其转换为小写，以进行不区分大小写的搜索。如果您想检查其他属性，可以在此处指定它。如果您正在比较一个数字，则不必将其转换为小写。

arrow函数使用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

角度管道过滤器与JSON

1 个答案: