如何将此管道与此代码中的另一个管道一起用于过滤 Angular 中的数据? [英] How to use this pipe with another one in this code for filtering the data in Angular?

查看：14
本文介绍了如何将此管道与此代码中的另一个管道一起用于过滤 Angular 中的数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我添加了表单输入，将按年龄范围过滤用户.为此创建了管道.现在我试图在工作示例中实现它，其中使用了其他管道来过滤基于其他形式的结果.我如何在这个工作示例中使用年龄范围管道并使这两个管道一起工作?代码如下:

年龄范围管道

 transform(value: any, args?: any): any{ if(!args) 返回值；return value.filter( item => item.age > args[0] && item => item.age

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

工作搜索示例管道

import { Pipe, PipeTransform } from '@angular/core';@管道({name: '过滤器',})导出类 FilterPipe 实现 PipeTransform {变换(项目:任何[]，值:字符串，道具:字符串):任何[] {如果 (!items) 返回 [];if (!value) 返回项目；返回 items.filter(singleItem =>singleItem[prop].toLowerCase().includes(value.toLowerCase()));}}

工作示例的 TypeScript

表单:FormGroup；@Output() 自动搜索:EventEmitter= new EventEmitter();@Output() groupFilters: EventEmitter= new EventEmitter();搜索文本:字符串 = '';构造函数(私人FB:FormBuilder，私有 userService:UserService) {}ngOnInit(): 无效 {this.buildForm();}buildForm():无效{this.form = this.fb.group({名称:new FormControl(''),前缀:new FormControl(''),位置:new FormControl(''),性别:new FormControl(''),agefrom: 新的 FormControl(''),年龄:新的FormControl('')});}搜索(过滤器:任何):无效{Object.keys(filters).forEach(key => filters[key] === '' ? delete filters[key] : key);this.groupFilters.emit(过滤器);}}

HTML

<h3>组过滤器</h3><div class="row"><div class="col-md-3"><输入类型="文本"表单控件名称=名称"类=形式控制"占位符=名称"#搜索名称/>

<div class="col-md-3"><输入类型="文本"formControlName="agefrom"类=形式控制"占位符=年龄"#搜索名称/>

<div class="col-md-3"><输入类型="文本"formControlName="nageto"类=形式控制"占位符=年龄"#搜索名称/>

<div class="col-md-3 col-sm-3"><select class="form-control"formControlName="前缀"><option value="">前缀</option><option value="MR">MR</option><option value="MS">MS</option></选择>

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

<div class="col-md-3 col-sm-3"><select class="form-control"formControlName="性别"><option value="">性别</option><option value="M">male</option><option value="F">女性</option></选择>

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

</form><br/>

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

如何在代码中实现该年龄范围管道并使其成为此工作示例的一部分?

解决方案

我解决了你的问题，但没有使用管道我在你在 (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

希望我的回答对你有帮助

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?

解决方案

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆