过滤管角度 - 多个参数



我有我的管道过滤器,它接收html中定义的对象,只是我必须定义它将过滤的属性。 如何在不必传递 HTML 参数的情况下生成过滤器?我希望您一般过滤所有列。

HTML----
<tr *ngFor="let view of list | filter : { id:searchText, name:searchText, 
age:searchText }">
<td>{{view.id}}</td>
<td>{{view.name}}</td>
<td>{{view.age}}</td>
</tr>

PIPE---
export class FilterPipe implements PipeTransform {
transform(value: any, searchText: any): any {
let filterKeys = Object.keys(searchText);
return value.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(searchText[keyName], 'gi').test(item[keyName]);
});
});
}
}

我做了这个例子,你不需要将对象属性传递给过滤器: https://stackblitz.com/edit/angular-zmzyy9

管道如下所示:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'filterAll' })
export class FilterPipe implements PipeTransform {
transform(value: any, searchText: any): any {
if(!searchText) {
return value;
}
return value.filter((data) => this.matchValue(data,searchText)); 
}
matchValue(data, value) {
return Object.keys(data).map((key) => {
return new RegExp(value, 'gi').test(data[key]);
}).some(result => result);
}
}

并在 HTML 中使用:

<tr *ngFor="let view of list | filterAll: searchText">
<td>{{view.id}}</td>
<td>{{view.name}}</td>
<td>{{view.age}}</td>
</tr>

最新更新