是否可以创建一个类似sql的管道

时间:2016-12-28 11:46:54

标签: angular typescript filter pipe

是否可以根据多个字段创建用于过滤数组的管道?但这些字段可以更改,因此过滤器功能必须包括所有包含的字段。

values.filter((value) => value[field] === args[0] || .... || value[field] === args[n])

那么这样的管道是如何创建的? 如何处理过滤器功能情况?

2 个答案:

答案 0 :(得分:0)

为过滤器创建搜索管道,如下所示。它将接受第一个参数作为保存所有值的主要对象和第二个参数保持值对象,您必须从主要参数中过滤。

定义对象:

data: any[];
searchValue:any[];
constructor(){
  this.data = [ 'apple', 'banana', 'carrot', 'pear', 'peach', 'orange','mango', 'grapes', 'lime', 'lemon' ];
  this.searchValue = [ 'apple',  'peach', 'orange' ]    
}

搜索渠道

export class SearchPipe implements PipeTransform {
  transform(items:any[], args:string[]):any[] {
        if (typeof items === 'object') {
            var resultArray = [];
            if (args.length === 0) {
                resultArray = items;
            }
            else {
                for (let item of items) {
                    if (item != null && args.indexOf(item)>=0) {
                        resultArray.push(item);
                    }                       
                }
            }
            return resultArray;
        }
        else {
            return null;
        }

    }
}

<强> HTML:

<div class="item" *ngFor="let item of data | searchPipe: searchValue">
  {{item}}
</div>

<强>输出:

enter image description here

答案 1 :(得分:0)

@sandip patel感谢您的回答。 我略微修改了你的答案。

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

    @Pipe({
        name: 'inFilter',
        pure: false
    })

    export class InFilterPipe implements PipeTransform {
        transform(items: any[], args: any): any[] {
            if (typeof items === 'object') {
                var resultArray = [];
                if (args.args.length === 0) {
                    resultArray = items;
                }
                else {
                    for (let item of items) {
                        if (item != null && args.args.indexOf(item[args.key]) >= 0) {
                            resultArray.push(item);
                        }
                    }
                }
                return resultArray;
            }
            else {
                return null;
            }

        }
    }

所以我可以过滤我想要的阵列。