数组中的自定义全局过滤器答案

【问题标题】：Custom global filter in array数组中的自定义全局过滤器
【发布时间】：2018-05-24 20:33:43
【问题描述】：

如何制作自定义全局过滤器

我有一个包含 4 个对象的数组

对象是id名称年龄和性别

var xx=[{id:1,name:"Ramesh",Age:13,Sex:"M"},{id:2,name:"Ram",Age:14,Sex:"M"}
     {id:3,name:"Suresh",Age:15,Sex:"M"}{id:4,name:"Rajesh",Age:16,Sex:"M"}];

场景：我有一个文本框作为搜索框。当我在文本框中输入1 然后需要显示所有对象，因为年龄包含1。如果我在文本框中输入Ra。那么我们应该展示 Ramesh, Rajesh, Ram。

我试过了

 let tempdata=[];
  tempdata.push(this.tyreAndRimList = xx.filter(x => x.name=== this.globalSearchbox));
            tempdata.push(xx.filter(x => x.age=== this.globalSearchbox));
            tempdata.push(xx.filter(x => x.sex=== this.globalSearchbox));
            let data = tempdata.map(function (obj) { return obj.id; });
            this.tyreAndRimList = data.filter(function (v, i) { return data.indexOf(v) == i; });

我尝试过喜欢、过滤并推送到临时数组并删除重复的对象。我不确定是否正确。请针对这种情况提出更好的解决方案。

我期待通过手动编码获得相同的功能：http://primefaces.org/primeng/#/datatable/filter

突然间我现在有个会议。所以我稍后会提供更多信息。如果您不了解此详细信息，请稍候。

【问题讨论】：

使用自定义管道。管道用于过滤搜索功能等数据..

标签： javascript arrays angular typescript filter

【解决方案1】：

您可以获取一个包含属性名称的数组，并将所有项目转换为字符串和小写字母以进行搜索。然后返回给定数组的子集。

function search(array, text) {
    text = text.toLowerCase();
    return array.filter(function (o) {
        return ['name', 'Age', 'Sex'].some(function (k) {
            return o[k].toString().toLowerCase().indexOf(text) !== -1;
        });
    });
}


var array = [{ id: 1, name: "Ramesh", Age: 13, Sex: "M" }, { id: 2, name: "Ram", Age: 14, Sex: "M" }, { id: 3, name: "Suresh", Age: 15, Sex: "M" }, { id: 4, name: "Rajesh", Age: 16, Sex: "M" }];

console.log(search(array, '1'));
console.log(search(array, 'ra'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

如果我正确地满足了您的要求，这就是您想要的：

您有一个搜索框，您可以在其中根据年龄或姓名过滤数据。

您可以为此创建自定义管道：

//template:
    <div>
     <input type="text" id="serachbox" placeholder="search" [(ngModel)] = "searchInput"/>
    </div>
    <ul>
      <li
          *ngFor = "let userList of xx | searchPipe : searchInput"    
        >
          {{userList.name}}, {{userList.age}}, {{userList.sex}}
      </li>
    </ul>


//Custom Pipe

    import { forEach } from '@angular/router/src/utils/collection';
    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'searchPipe'
    })

    export class SearchPipePipe implements PipeTransform{

        constructor(){}

        transform(value, filter){
            let resultArray = [];

            if(filter != null && filter != ""){
                if(isNaN(filter)){
                    for(let item of value){
                        if(item.name.includes(filter)){
                            resultArray.push(item);
                        }
                    }
                return resultArray;
                }else{
                    for(let item of value){
                        if(item.age.includes(filter)){
                            resultArray.push(item);
                        }
                    }
                    return resultArray;
                }
            }
            return value;
        }
    }

【讨论】：

是的！这就是我想要的，但不完全是。因为我可以使用启动全局过滤器，所以与pipe 的概念相同。

【解决方案3】：

如果您想搜索对象中的所有字段，只需使用filter 指定您的条件，如下所示：

let searchValue = '1';
const res = xx.filter(item => 
          item.name.toUpperCase().includes(searchValue.toString().toUpperCase())
         || item.Age.toString().includes(searchValue)
         || item.Sex === searchValue.toString().toUpperCase());

console.log(res);

【讨论】：