angular 列表过滤管道

类似 mongodb 查询语法，使用示例如下

<ng-container *ngFor="let rec of list | listFilter:queryObject"></ng-container>

✨ 插件特性

• 全局参数配置
• 与($and)，或($or)，非或($nor)，非($not)
• <($lt)，<=($lte)，>($gt)，>=($gte)
• 在指定范围之内($in)，不在指定范围之内($nin)
• 范围($between)
• 相等比较($eq)
• 不相等($neq)
• 深度相等比较($deepEquals)
• 属性值存不为 null、undefined、空字符串、空数组($exists)
• 正则($reg)
• 日期在之前($before)
• 日期在之后($after)
• 数组包含某值($contains)
• 数组包含全部($all)
• 数组包含任意($any)
• 数组长度或对象属性个数值($size)
• 取模($mod)
• 嵌入对象匹配，使用点记法(a.b.c)
• 数组内对象匹配($elemMatch)
• 自定义判断逻辑($cb)

📦 安装

npm install @demacia/ngx-list-filter --save

🔨 使用

引入module

import { ListFilterModule } from '@demacia/ngx-list-filter';

@NgModule({
    imports: [
        ListFilterModule
    ]
})
export class AppModule {
}

🎨 API

1. 全局参数配置

可在 module 中配置全局参数，使用示例如下

@NgModule({
    ...
    providers: [
        ...
        {
            provide: LIST_FILTER_CONFIG,
            useValue: {
                regFlags: 'gmi',
                valueGetter: (obj: any, key: string) => obj[key]
            }
        }
    ]
})
export class XxxModule {
}

regFlags

正则匹配标志，默认值i

valueGetter

取值器，根据该方法获取 key 对应的 value。默认支持点记法(a.b.c)

2. $and、$or、$nor、$not

a）最外层(尚没有具体属性)逻辑连接

<!--
下面三种方式等效

注意:
1. $and 可省略，默认没有操作符连接的情况就是 $and
2. 多个查询属性之间的逻辑连接可用对象 {prop1:..., prop2:..., ...}，也可用数组 [{prop1:...}, {prop2:...}, ...]
-->
<ng-container *ngFor="let rec of list | listFilter:{age:{$lt:30}, name:{$reg:'xxx'}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{$and:{age:{$lt:30}, name:{$reg:'xxx'}}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{$and:[{age:{$lt:30}}, {name:{$reg:'xxx'}}]}"></ng-container>

b）某具体属性下的逻辑连接

<!--
下面三种方式等效

注意:
1. $and 可省略，默认没有操作符连接的情况就是 $and
2. 多个过滤条件之间的逻辑连接可用对象 {query1:..., query2:..., ...}，也可用数组 [{query1:...}, {query2:...}, ...]
-->
<ng-container *ngFor="let rec of list | listFilter:{age:{$gt:30, $lt:80}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{age:{$and:{{$gt:30}, {$lt:80}}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{age:{$and:[{$gt:30}, {$lt:80}]}}"></ng-container>

$lt、$lte、$gt、$gte

<ng-container *ngFor="let rec of list | listFilter:{age:{$gte:30, $lte:80}}"></ng-container>

$in、$nin

a）原始类型值在指定范围之内

<!--
age 是原始类型

下面两种方式等效，筛选条件为数组时，$in 可省略（不推荐）
-->
<ng-container *ngFor="let rec of list | listFilter:{age:[28, 30, 60]}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{age:{$in:[28, 30, 60]}}"></ng-container>

b）数组包含指定范围内的值

不推荐，请优先使用数组相关的操作符

<!-- likes 是数组类型，注意只要数组包含任意一个筛选值即可，与 $any 操作符同效 -->
<ng-container *ngFor="let rec of list | listFilter:{likes:{$in:['apple', 'banana']}}"></ng-container>

$between（[m, n]）

判断值大小在 m 到 n 之间，即 m < x < n

<ng-container *ngFor="let rec of list | listFilter:{age:{$between:[20, 40]}}"></ng-container>

$eq、$neq

相等、不相等判断

<!--
下面两种方式等效

注意:
1. $eq 可省略，默认没有操作符的情况就是 $eq
2. 采用的是相等比较(==)，类型不同时会自动转换，比如字符串和数字比较时会先转化为字符串。字符串如果需要部分匹配，请使用正则操作符 $reg
-->
<ng-container *ngFor="let rec of list | listFilter:{name:'xxx'}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{name:{$eq:'xxx'}}"></ng-container>

$eq 也可用于数组，但是只能使用原始类型的筛选值，功能等效于操作符 $contains

<!-- 下面四种方式等效，推荐使用 $contains，使语义更明确 -->
<ng-container *ngFor="let rec of list | listFilter:{likes:'apple'}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{likes:{$eq:'apple'}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{likes:{$contains:'apple'}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{likes:{$in:['apple']}}"></ng-container>

$deepEquals

对象深度比较，如果系统已加载了lodash或underscore库，将使用它们的isEqual方法，否则简单使用JSON.stringify比较序列化后的字符串是否相等

<ng-container *ngFor="let rec of list | listFilter:{addr:{$deepEquals:{street:'xxx', codes:['aaa','bbb']}}}"></ng-container>

$exists

判断属性是否存在，属性值不为 null、undefined、空字符串、空数组 时视为存在

<ng-container *ngFor="let rec of list | listFilter:{children:{$exists:true}}"></ng-container>

$reg

正则匹配，默认标志为i，即忽略大小写。可由全局配置regFlags修改

<ng-container *ngFor="let rec of list | listFilter:{name:{$reg:'xxx'}}"></ng-container>

如果直接使用了正则，可省略 $reg 操作符

<ng-container *ngFor="let rec of list | listFilter:{name:/xxx/i"></ng-container>

可使用 $flag 设置正则标志位，优先级高于全局配置

<ng-container *ngFor="let rec of list | listFilter:{name:{$reg:'xxx', $flags:'ig'}}"></ng-container>

$reg 也可用于数组，数组中任意一个元素匹配成功即可

<ng-container *ngFor="let rec of list | listFilter:{likes:{$reg:'xxx'}}"></ng-container>

$before、$after

日期比较，采用 Date.parse 解析日期字符串

<ng-container *ngFor="let rec of list | listFilter:{birth:{$before:'2019/8/1 12:00:00'}}"></ng-container>
<ng-container *ngFor="let rec of list | listFilter:{birth:{$before:1565544805000}}"></ng-container>

$contains

判断数组是否包含某值，注意是相等比较，若需部分匹配字符串，请使用 $reg

<ng-container *ngFor="let rec of list | listFilter:{likes:{$contains:'apple'}}"></ng-container>

$all

判断数组是否包筛选数组全部的值

<ng-container *ngFor="let rec of list | listFilter:{likes:{$all:['apple', 'banana']}}"></ng-container>

$any

判断数组是否包筛选数组任意一个值

<ng-container *ngFor="let rec of list | listFilter:{likes:{$any:['apple', 'banana']}}"></ng-container>

$size

判断数组长度或对象属性个数为指定值

<!-- 数组长度 -->
<ng-container *ngFor="let rec of list | listFilter:{likes:{$size:3}}"></ng-container>

<!-- 对象属性个数 -->
<ng-container *ngFor="let rec of list | listFilter:{addr:{$size:3}}"></ng-container>

$mod（[m, n]）

数字取模判断，x % m = n

<ng-container *ngFor="let rec of list | listFilter:{age:{$mod:[2, 1]}}"></ng-container>

点记法

深度属性查找，使用全局配置的valueGetter获取健名对应的键值。默认实现的取值器可识别点记法， 如：list = [ { addr: { street: 'xxx' } }, ... ]，当需要对 street 查找时，需使用 { 'addr.street': { $reg: 'xxx' } }

$elemMatch

数组对象匹配，当数组值为对象，且需要对其查询时使用，如：list = [ { users: [ { name: 'aaa' }, { name: 'bbb' } ] }, ... ]， 对 name 查找时需使用 { users: { $eleMatch: { name: { $reg: 'xxx' } } } }。 注意 $eleMatch 中可使用任意前面提及的操作符，包括 $eleMatch 本身

$cb

自定义判断逻辑，当插件所提供的操作符无法满足需求时使用

<ng-container *ngFor="let rec of list | listFilter:{age:{$cb:logicFunction}}"></ng-container>

本管道也可当做服务使用

export class XxxComponent {
    
    constructor(private listFilter: ListFilterPipe) {
        list = listFilter.transform(list, { name: { $reg: 'xxx' } });
    }

}