在过滤管道上使用多个字段| Angular 4 [英] Using multiple fields on Filter Pipe | Angular 4

问题描述

我想知道如何使用Pipe来使用多个输入字段来过滤json对象，到目前为止我的代码只有一个字段按名称过滤：

I was wondering how would I use Pipe to filter a json object using multiple inputs fields, here's my code so far with only one field filtering by name:

TS

members = [
    {name:'Carl', country:"Brazil"},
    {name:'John', country:"United States"},
    {name:'Madhu', country:"India"}
  ]

PIPE.TS

  transform(members: any, term: any): any {
//check if search term is undefined
if (term === undefined) return members;

//return updated members array
return members.filter(function(member){
  return member.name.toLowerCase().includes(term.toLowerCase());
})
  }

HTML

<input type="text" [(ngModel)]="term" name="any"/>

          <li *ngFor="let member of members | filter:term">

              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>

          </li>

我想添加一个额外的输入字段来搜索国家。

I want to add an extra input field where it will search for the country.

编辑：

使用以下代码：

TS COMPONENT

 fields: any  = { name: "", country: "" };
  filters: any = { name: "", country: "" };

  updateFilters(): void {
      this.filters = Object.assign({}, this.fields);
      console.log(this.filters);
  }

HTML

<input type="text" name="any" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
          <input type="text" name="anyy" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

<li *ngFor="let member of members | filter: filters">
            <div style="border-bottom: 1px solid; border-color:rgba(0,0,0,0.3);margin-bottom:15px">
              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>
            </div>
          </li>

PIPE.TS

  transform(members: any, filters: any): any {
    return members.filter(item => {
    return (item.name.toLowerCase().indexOf(filters.name.toLowerCase()) >= 0 && item.country.toLowerCase().indexOf(filters.country.toLowerCase()) >= 0);

    });
  }

推荐答案

您可以传递一个对象多个字段：

You can pass an object instead of multiple fields:

<li *ngFor="let member of members | filter: filters">

在您的组件类中：

filters: any = { name: "ex", country: "a country" };

更新：

<input type="text" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
<input type="text" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

在您的组件中：

fields: any  = { name: "", country: "" };
filters: any = { name: "", country: "" };

updateFilters(): void {
    this.filters = Object.assign({}, this.fields);
}

这篇关于在过滤管道上使用多个字段| Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！