How to apply filters to *ngFor?

前端 未结 23 1245
無奈伤痛
無奈伤痛 2020-11-22 03:44

Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results, although the implementation still seems to be vague, wit

23条回答
  •  孤独总比滥情好
    2020-11-22 03:47

    I was finding somethig for make a filter passing an Object, then i can use it like multi-filter:

    i did this Beauty Solution:

    filter.pipe.ts

    import { PipeTransform, Pipe } from '@angular/core';
    
    @Pipe({
      name: 'filterx',
      pure: false
    })
    export class FilterPipe implements PipeTransform {
     transform(items: any, filter: any, isAnd: boolean): any {
      let filterx=JSON.parse(JSON.stringify(filter));
      for (var prop in filterx) {
        if (Object.prototype.hasOwnProperty.call(filterx, prop)) {
           if(filterx[prop]=='')
           {
             delete filterx[prop];
           }
        }
     }
    if (!items || !filterx) {
      return items;
    }
    
    return items.filter(function(obj) {
      return Object.keys(filterx).every(function(c) {
        return obj[c].toLowerCase().indexOf(filterx[c].toLowerCase()) !== -1
      });
      });
      }
    }
    

    component.ts

    slotFilter:any={start:'',practitionerCodeDisplay:'',practitionerName:''};
    

    componet.html

                 
                      
                    
                    
                    
                  
    
    
     ...
    

提交回复
热议问题