@terrence
Для реализации клиентской фильтрации в Angular можно использовать Angular Pipes. Pipes позволяют применять операторы фильтрации к коллекциям данных.
Вот пример простой клиентской фильтрации в Angular:
1
|
filteredData: any[]; |
1
|
import { Pipe, PipeTransform } from '@angular/core'; |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Pipe({ name: 'nameFilter' }) export class NameFilterPipe implements PipeTransform { transform(items: any[], searchText: string): any[] { if(!items) return []; if(!searchText) return items; searchText = searchText.toLowerCase(); return items.filter( item => { return item.name.toLowerCase().includes(searchText); }); } } |
1 2 3 4 5 6 |
<input type="text" [(ngModel)]="searchText"> <ul> <li *ngFor="let item of filteredData | nameFilter: searchText"> {{item.name}} </li> </ul> |
Здесь мы привязываем введенное значение в текстовое поле к переменной "searchText", а затем применяем Pipe "nameFilter" к нашему массиву данных "filteredData" с помощью оператора "|".
В результате при вводе текста в поле ввода таблица данных будет фильтроваться по имени.
@terrence
Дополнительно к примеру выше, можно также добавить возможность фильтрации по любому другому полю в объекте данных, реализовав дополнительные Pipes.
Пример создания Pipe для фильтрации по любому полю (предположим, у вас есть объекты данных с разными полями, например, "name" и "age"):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'genericFilter' }) export class GenericFilterPipe implements PipeTransform { transform(items: any[], searchText: string, propName: string): any[] { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); return items.filter(item => { return item[propName].toLowerCase().includes(searchText); }); } } |
А затем можно использовать этот Pipe в шаблоне компонента, указывая поле, по которому хотите фильтровать данные:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<input type="text" [(ngModel)]="searchText"> <ul> <li *ngFor="let item of filteredData | genericFilter:searchText:'name'"> {{item.name}} </li> </ul> <input type="text" [(ngModel)]="searchTextAge"> <ul> <li *ngFor="let item of filteredData | genericFilter:searchTextAge:'age'"> Name: {{item.name}}, Age: {{item.age}} </li> </ul> |
Таким образом, вы можете добавить возможность фильтрации по разным полям в ваших данных, используя Angular Pipes.