Question

我已经添加了表单输入，可以按年龄范围过滤用户。为此创建了管道。现在，我尝试在工作示例中实现该目标，在该示例中，使用其他管道根据其他形式过滤结果。在这个工作示例中，如何使用年龄范围的管道并使这两个管道一起工作？这是代码：

年龄段管道

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

其中args [0]是最小值，而args [1]最大值。

工作搜索示例的管道

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

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/>

有关完整代码示例，您可以在此处查看： https://stackblitz.com/edit/ng6-multiple-search-values-smz1cb-solved-jx6kgc?file=src%2Fapp%2Fuser%2Ffilter.pipe.ts

如何在代码中实现该年龄段管道并将其作为本工作示例的一部分？

Answer 1

我解决了您的问题，但不使用管道，而是在您在（user-list.component.ts）中创建的过滤器函数中进行了逻辑处理，您可以在此处进行检查：

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

希望我的回答对您有帮助

如何在此代码中将此管道与另一个管道一起使用以过滤Angular中的数据？

1 个答案: