Question

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

我有一个包含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; });

我尝试过，过滤并推送到临时数组并删除重复的对象。我不确定是否正确。对于这种情况，PLease建议更好的解决方案。

我希望通过手动编码实现相同的功能：http://primefaces.org/primeng/#/datatable/filter

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

Answer 1

您可以使用属性名称的数组，并将所有项目转换为字符串，并将小写字母转换为搜索。然后返回给定数组的子集。

＆＃13;

getMessageHistory(userId: any): Observable<Message[]> {
 let msgHistory: Array<Message> =[];
 return this.userService.getChatHistory(this._loggedInUserId,userId)
            .first()
            .map(messages => { 
                if(messages ==null || messages.length ==0){
                    this.messages = [];
                } else {
                    console.log("messages retrieved are "+messages);
                    this.messages = messages;
                    for (var msg of  this.messages) {

                        let tempMsg :Message = new Message();
                        console.log("from id is ",msg.fromId);
                        tempMsg.fromId= msg.fromId;
                        tempMsg.toId= msg.toId;
                        tempMsg.message= msg.messageText;
                        msgHistory.push(tempMsg);

                    }

                }
                return Observable.of(msgHistory);
            });

}

＆＃13;

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'));

＆＃13;

Answer 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;
        }
    }

Answer 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);

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

3 个答案: