Как написать клиентскую фильтрацию в angular?

Пользователь

от terrence , в категории: JavaScript , 2 месяца назад

Как написать клиентскую фильтрацию в angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от hobart.rath , месяц назад

@terrence 

Для реализации клиентской фильтрации в Angular можно использовать Angular Pipes. Pipes позволяют применять операторы фильтрации к коллекциям данных.


Вот пример простой клиентской фильтрации в Angular:

  1. В вашем компоненте создайте переменную для хранения фильтрованного списка данных:
1
filteredData: any[];


  1. Импортируйте нужный Pipe в ваш компонент:
1
import { Pipe, PipeTransform } from '@angular/core';


  1. Создайте Pipe для фильтрации данных. Например, для фильтрации по имени:
 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. В шаблоне компонента используйте созданный Pipe для фильтрации данных. Например:
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" с помощью оператора "|".


В результате при вводе текста в поле ввода таблица данных будет фильтроваться по имени.