The implementation I want to share is how you could filter an array of non-nested objects using Pipes in Angular.

我要分享的实现是如何使用Angular中的Pipes过滤一系列非嵌套对象。

Consider an array of JSON objects exported from users.ts

考虑从users.ts导出的JSON对象数组

export const users=[{“title”:”Monsieur”,”first”:”Niklas”,”last”:”Philippe”,”age”:20,”gender”:”male”,”email”:”niklas.philippe@example.com”},{“title”:”Mrs”,”first”:”Nicoline”,”last”:”Jensen”,”age”:4,”gender”:”female”,”email”:”nicoline.jensen@example.com”},{“title”:”Miss”,”first”:”Lilly”,”last”:”Smith”,”age”:34,”gender”:”female”,”email”:”lily.smith@example.com”},{“title”:”Mr”,”first”:”Julio”,”last”:”Ibanez”,”age”:40,”gender”:”male”,”email”:”julio.ibanez@example.com”},{“title”:”Monsieur”,”first”:”Horst”,”last”:”Bernard”,”age”:52,”gender”:”male”,”email”:”horst.bernard@example.com”}
]

I would like to create a table with all the above details and search for any thing in the table using a search box as well as sort any column in the table in ascending or descending order.

我想创建一个包含以上所有详细信息的表，并使用搜索框搜索表中的任何内容，以及以升序或降序对表中的任何列进行排序。

Template:

模板：

<input type=”text” [(ngModel)]=”searchTerm” name=”searchTerm” placeholder=”Search”><table class=”table-bordered”>
<tr>
<th>Title</th>
<th>First Name
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-up" id="firstAsc"></i>
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-down sorting" id="firstDesc"></i>
</th><th>Last Name
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-up" id="lastAsc"></i>
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-down" id="lastDesc"></i>
</th><th>Age
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-up" id="ageAsc"></i>
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-down" id="ageDesc"></i>
</th><th>Email
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-up" id="emailAsc"></i>
<i appSortParams (param)="setSortParams($event)" class="fa fa-arrow-down" id="emailDesc"></i>
</th></tr><tr *ngFor="let x of users|filter:searchTerm|sort:direction:column:type">
<td>{{x.title}}</td>
<td>{{x.first}}</td>
<td>{{x.last}}</td>
<td>{{x.age}}</td>
<td>{{x.email}}</td>
</tr></table>

We have used 2 pipes:filter and sort as you can see below. The sort pipe is chained to the filter pipe. This means the results of the filter pipe are passed as input to the sort pipe.

我们使用了2个管道： 过滤和排序 ，如下所示。 分拣管链接到过滤管。 这意味着过滤器管道的结果将作为输入传递到排序管道。

<tr *ngFor="let x of users|filter:searchTerm|sort:direction:column:type">

We are passing the users array and the searchTerm which the user enters in the search box as arguments to the filter pipe.

我们传递用户数组和用户在搜索框中输入的searchTerm作为过滤器管道的参数。

The sort pipe takes 4 arguments:The results of the filter pipe, the direction of sorting i.e ascending or descending,the type of column to sort i.e string or numeric and also the column to be sorted.

排序管道采用4个参数：筛选器管道的结果，排序的方向 (即升序或降序)，要排序的列的类型 (即字符串或数字)以及要排序的列 。

Component Class:

组件类别：

import {users} from '../users';export class AppComponent {searchTerm:string=””;
direction:string=”asc”;
column:string=”first”;
type:string=”string”;
users=[...users];setSortParams(param){
this.direction=param.dir;
this.column=param.col;
this.type=param.typ;
}
}

The default value of direction is “asc” and the default value of the column to sort when the component loads is “first”.

direction的默认值为“ asc”，组件加载时要排序的列的默认值为“ first”。

Since the “first” column has only string values, the default value of type will be “string”.

由于“第一”列只有字符串值，因此类型的默认值将是“字符串”。

All the <i> tags have an attribute directive appSortParams. The purpose of this directive is to listen for click events and use the ID of the <i> tag clicked to find the column to be sorted,direction of sorting and the type of column to be sorted.

所有<i>标记都有一个属性指令appSortParams。 该指令的目的是侦听单击事件，并使用单击的<i>标记的ID来查找要排序的列，排序的方向和要排序的列的类型。

These details need to be returned back to the component.

这些详细信息需要返回给组件。

Lets see how this is achieved.

让我们看看这是如何实现的。

@Directive({selector: ‘[appSortParams]’})export class SortParamsDirective {
@Output() param:EventEmitter<any>=new EventEmitter();
constructor(private element:ElementRef) { }@HostListener(‘click’) onClickIcon(){
this.selectSort(this.element.nativeElement.id)
}selectSort(id){
switch(id){case “firstAsc”:
this.param.emit({dir:”asc”,col:”first”,typ:”string”})
break;case “lastAsc”:
this.param.emit({dir:”asc”,col:”last”,typ:”string”})
break;case “ageAsc”:
this.param.emit({dir:”asc”,col:”age”,typ:”number”})
break;case “emailAsc”:
this.param.emit({dir:”asc”,col:”email”,typ:”string”})
break;case “firstDesc”:
this.param.emit({dir:”desc”,col:”first”,typ:”string”})
break;case “lastDesc”:
this.param.emit({dir:”desc”,col:”last”,typ:”string”})
break;case “ageDesc”:
this.param.emit({dir:”desc”,col:”age”,typ:”number”})
break;case “emailDesc”:
this.param.emit({dir:”desc”,col:”email”,typ:”string”})
break;}}}

Whenever an <i> tag is clicked, the Directive which listens for click events calls the selectSort() passing the ID of the clicked element as argument.

每当单击<i>标记时，侦听click事件的指令都会调用selectSort() ，将clicked元素的ID作为参数传递。

@HostListener(‘click’) onClickIcon(){
this.selectSort(this.element.nativeElement.id)
}

The selectSort() contains a switch statement, we assigns values to the direction,column and type variables based on the ID of the <i> tag clicked.

selectSort()包含一个switch语句，我们根据单击的<i>标签的ID将值分配给direction，column和type变量。

param is an Output variable which passes information about the direction,column and type via an object. There is an event binding for the param variable and every time the click event triggers, setSortParams() is called in the component.

param是一个Output变量，它通过一个对象传递有关方向，列和类型的信息。 参数变量有一个事件绑定，每次单击事件触发时，组件中都会调用setSortParams() 。

We are accessing the object in the component via this method in the component.

我们正在通过组件中的此方法访问组件中的对象。

setSortParams(param){
this.direction=param.dir;
this.column=param.col;
this.type=param.typ;
}

Lets first check the Filtering functionality.

首先让我们检查过滤功能 。

We are creating a Pipe named FilterPipe to help achieve this search.filter is the selector of the FilterPipe.

我们正在创建一个名为FilterPipe的管道，以帮助完成此搜索。 filter是FilterPipe的选择器。

//filter.ts
@Pipe({name:’filter’
})export class FilterPipe implements PipeTransform{transform(items,searchTerm){
let filteredList=[];if(searchTerm){let newSearchTerm=!isNaN(searchTerm)? searchTerm.toString(): searchTerm.toString().toUpperCase();
let prop;return items.filter(item=>{
for(let key in item){
prop=isNaN(item[key]) ? item[key].toString().toUpperCase() : item[key].toString();if(prop.indexOf(newSearchTerm) > -1){
filteredList.push(item);
return filteredList;}
}
})
}
else{
return items;
}}
}

Since the class implements PipeTransform interface, the transform method needs to be defined. This method takes the users list(named as items)and the searchTerm as arguments.

由于该类实现了PipeTransform接口，因此需要定义transform方法。 此方法将用户列表(命名为项目)和searchTerm作为参数。

Only if the searchTerm has a non-null value, we shall be performing a search, else we shall return the original users list as it is back to the component.

仅当searchTerm具有非null值时，我们才执行搜索，否则我们将返回原始用户列表，因为它返回了组件。

if(searchTerm){
......Search functionality......
}
else{
return items;
}

Now lets check when there is a non-null searchTerm. We have the below logic.

现在让我们检查一下是否有一个非空的searchTerm。 我们有以下逻辑。

let newSearchTerm=!isNaN(searchTerm)? searchTerm.toString(): searchTerm.toString().toUpperCase();
let prop;return items.filter(item=>{
for(let key in item){
prop=isNaN(item[key]) ? item[key].toString().toUpperCase() : item[key].toString();if(prop.indexOf(newSearchTerm) > -1){
filteredList.push(item);
return filteredList;}
}
})

1. If the searchTerm is numeric, convert it into a string and if it is non-numeric,convert it into a string and into uppercase.We assign the modified value to a variable newSearchTerm.

   如果searchTerm为数字，则将其转换为字符串，如果非数字，则将其转换为字符串和大写字母。我们将修改后的值分配给变量newSearchTerm。

let newSearchTerm=
!isNaN(searchTerm)? 
searchTerm.toString(): 
searchTerm.toString().toUpperCase();

1. Next we are applying the filter method to the users array. The argument item of the filter method will be an object of the array.
   接下来，我们将filter方法应用于users数组。 filter方法的参数项将是数组的对象。
2. We are iterating through each object of the array. key is the object property and item[key] is the property’s value.
   我们正在遍历数组的每个对象。 key是对象的属性，item [key]是属性的值。

for(let key in item){
.......
}

4. Next we are checking if a property’s value is non-numeric. If yes, convert it into string and then uppercase. If not, just convert it into string. We assign the modified property’s value to a block variable prop.

4.接下来，我们检查属性的值是否为非数值。 如果是，请将其转换为字符串，然后大写。 如果没有，只需将其转换为字符串即可。 我们将修改后的属性的值分配给块变量prop。

prop=isNaN(item[key]) ? item[key].toString().toUpperCase() : item[key].toString();if(prop.indexOf(newSearchTerm) > -1){
filteredList.push(item);
return filteredList;}
}

We are checking if the prop contains a portion or the entire newsearchTerm using the indexOf operator.

我们正在使用indexOf运算符检查道具是否包含部分或整个newsearchTerm 。

If yes, we add the object item whose property value includes the newsearchTerm to an array filteredList and return it back.

如果是的话，我们增加其属性值包括newsearchTerm到一个数组filteredList目标选项 ，然后返回。

Now lets check the Sorting functionality.

现在让我们检查排序功能 。

We have created a SortPipe to acheive this. sort is the selector of this pipe.

我们创建了一个SortPipe来实现此目的。 sort是此管道的选择器。

//sort.ts
@Pipe({name:’sort’})export class SortPipe implements PipeTransform{transform(items:[],direction:string,column:string,type:string){
let sortedItems=[];sortedItems=direction===”asc” ?
this.sortAscending(items,column,type):
this.sortDescending(items,column,type)return sortedItems;
}sortAscending(items,column,type){
return […items.sort(function(a:any,b:any){
if(type===”string”){
if (a[column].toUpperCase() < b[column].toUpperCase()) return -1;
}
else{
return a[column]-b[column];
}
})]
}sortDescending(items,column,type){
return […items.sort(function(a:any,b:any){
if(type===”string”){
if (a[column].toUpperCase() > b[column].toUpperCase()) return -1;
}
else{
return b[column]-a[column];
}
})]
}
}

The transform() accepts 4 arguments:results of the filter pipe, the direction, column and type of column.

transform()接受4个参数：过滤器管道的结果，方向，列和列的类型。

Based on the direction value, we are calling either sortAscending() or sortDescending().

根据方向值，我们将调用sortAscending()或sortDescending() 。

sortedItems=direction===”asc” ?
this.sortAscending(items,column,type):
this.sortDescending(items,column,type)

In both the methods,the logic for sorting strings and numbers are done separately based on the type value. The column value decides which column needs to be sorted.

在这两种方法中，用于对字符串和数字进行排序的逻辑都是根据类型值分别完成的。 列值决定需要对哪一列进行排序。

sortAscending(items,column,type){
return […items.sort(function(a:any,b:any){
if(type===”string”){
if (a[column].toUpperCase() < b[column].toUpperCase()) return -1;
}
else{
return a[column]-b[column];
}
})]
}

You can find the entire working below:

您可以在下面找到整个工作：