如何在此代码中将此管道与另一个管道一起使用以过滤Angular中的数据? [英] 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:

年龄段管道

     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]最大值.

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

工作搜索示例的管道

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

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

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

推荐答案

我解决了您的问题，但不使用管道，而是在(user-list.component.ts)中创建的过滤器函数中进行了逻辑检查，您可以对其进行检查在这里:

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 :

希望我的回答对您有帮助

Hope my answer help you

这篇关于如何在此代码中将此管道与另一个管道一起使用以过滤Angular中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！