Angular 4 Pipe Filter

后端 未结 4 1097
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-11-28 08:30

I am trying to use a custom pipe to filter my *ngFor loop using an input field with ngModel. With my other custom pipe (sortBy), it works perfectly fine. Howeve

4条回答
  •  死守一世寂寞
    2020-11-28 09:05

    I know this is old, but i think i have good solution. Comparing to other answers and also comparing to accepted, mine accepts multiple values. Basically filter object with key:value search parameters (also object within object). Also it works with numbers etc, cause when comparing, it converts them to string.

    import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({name: 'filter'})
    export class Filter implements PipeTransform {
        transform(array: Array, filter: Object): any {
            let notAllKeysUndefined = false;
            let newArray = [];
    
            if(array.length > 0) {
                for (let k in filter){
                    if (filter.hasOwnProperty(k)) {
                        if(filter[k] != undefined && filter[k] != '') {
                            for (let i = 0; i < array.length; i++) {
                                let filterRule = filter[k];
    
                                if(typeof filterRule === 'object') {
                                    for(let fkey in filterRule) {
                                        if (filter[k].hasOwnProperty(fkey)) {
                                            if(filter[k][fkey] != undefined && filter[k][fkey] != '') {
                                                if(this.shouldPushInArray(array[i][k][fkey], filter[k][fkey])) {
                                                    newArray.push(array[i]);
                                                }
                                                notAllKeysUndefined = true;
                                            }
                                        }
                                    }
                                } else {
                                    if(this.shouldPushInArray(array[i][k], filter[k])) {
                                        newArray.push(array[i]);
                                    }
                                    notAllKeysUndefined = true;
                                }
                            }
                        }
                    }
                }
                if(notAllKeysUndefined) {
                    return newArray;
                }
            }
    
            return array;
        }
    
        private shouldPushInArray(item, filter) {
            if(typeof filter !== 'string') {
                item = item.toString();
                filter = filter.toString();
            }
    
            // Filter main logic
            item = item.toLowerCase();
            filter = filter.toLowerCase();
            if(item.indexOf(filter) !== -1) {
                return true;
            }
            return false;
        }
    }
    
        

    提交回复
    热议问题