How to use this pipe with another one in this code for filtering the data in Angular?

问题

I've added to form inputs that will filter users by age ranges. Created pipe for that. Now I am trying to implement that in the working example where were used other pipe for filtering results based on other forms. How can I use age range pipe in this working example and make those 2 pipes work together? Here is the code:

Age range pipe

     transform(value: any, args?: any): any
 { if(!args) return value;
 return value.filter( item => item.age > args[0] && item => item.age < args[1])
     );
     }

Where args[0] is min value and args[1] max value.

Pipe of working search example

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

@Pipe({
    name: 'filter',
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], value: string, prop: string): any[] {
        if (!items) return [];
        if (!value) return items;

        return items.filter(singleItem =>
            singleItem[prop].toLowerCase().includes(value.toLowerCase())
        );

    }
}

TypeScript of working example

form: FormGroup;

  @Output() autoSearch: EventEmitter<string> = new EventEmitter<string>();
  @Output() groupFilters: EventEmitter<any>  = new EventEmitter<any>();
  searchText: string = '';
  constructor(private fb: FormBuilder,
              private userService: UserService) {}

  ngOnInit(): void {
    this.buildForm();
  }

  buildForm(): void {
    this.form = this.fb.group({
      name: new FormControl(''),
      prefix: new FormControl(''),
      position: new FormControl(''),
      gender: new FormControl(''),
      agefrom: new FormControl(''),
      ageto: new FormControl('')
    });
  }

  search(filters: any): void {
    Object.keys(filters).forEach(key => filters[key] === '' ? delete filters[key] : key);
    this.groupFilters.emit(filters);
  }

}

HTML

<form novalidate
      [formGroup]="form">

  <h3>Group Filter</h3>
  <div class="row">
    <div class="col-md-3">
  <input type="text" 
  formControlName="name"
         class="form-control"
         placeholder="name"
         #searchName
        />
    </div>
        <div class="col-md-3">
  <input type="text" 
  formControlName="agefrom"
         class="form-control"
         placeholder="age from"
         #searchName
        />
    </div>
        <div class="col-md-3">
  <input type="text" 
  formControlName="nageto"
         class="form-control"
         placeholder="age to"
         #searchName
        />
    </div>
    <div class="col-md-3 col-sm-3">
      <select class="form-control"
              formControlName="prefix">
        <option value="">Prefix</option>
        <option value="MR">MR</option>
        <option value="MS">MS</option>
      </select>
    </div>

    <div class="col-md-3 col-sm-3">
      <select class="form-control"
              formControlName="position">
        <option value="">Position</option>
        <option value="admin">admin</option>
        <option value="student">student</option>
      </select>
    </div>

    <div class="col-md-3 col-sm-3">
      <select class="form-control"
              formControlName="gender">
        <option value="">Gender</option>
        <option value="M">male</option>
        <option value="F">female</option>
      </select>
    </div>

    <div class="col-md-3 col-sm-3">
      <button class="btn btn-primary"
              (click)="search(form.value)">Search</button>
    </div>
  </div>

</form><br/>

For the full code example you can check here: https://stackblitz.com/edit/ng6-multiple-search-values-smz1cb-solved-jx6kgc?file=src%2Fapp%2Fuser%2Ffilter.pipe.ts

How can I implement that age range pipe in the code and make it the part of this working example?

回答1:

I solve your problem but without using pipes I make the logic in the filter function you made in the (user-list.component.ts) you can check it here :

https://stackblitz.com/edit/ng6-multiple-search-values-smz1cb-solved-age-range?file=src%2Fapp%2Fuser%2Fuser-list%2Fuser-list.component.html

Hope my answer help you

来源：https://stackoverflow.com/questions/53444031/how-to-use-this-pipe-with-another-one-in-this-code-for-filtering-the-data-in-ang