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

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

terrence

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

15 | 0

2 ответа

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

hobart.rath

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

@terrence

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

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

В вашем компоненте создайте переменную для хранения фильтрованного списка данных:

1	filteredData: any[];

Импортируйте нужный Pipe в ваш компонент:

1	import { Pipe, PipeTransform } from '@angular/core';

Создайте Pipe для фильтрации данных. Например, для фильтрации по имени:

@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);
    });
  }
}

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

<input type="text" [(ngModel)]="searchText">
<ul>
  <li *ngFor="let item of filteredData | nameFilter: searchText">
    {{item.name}}
  </li>
</ul>

Здесь мы привязываем введенное значение в текстовое поле к переменной "searchText", а затем применяем Pipe "nameFilter" к нашему массиву данных "filteredData" с помощью оператора "|".

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

1 | 0

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

mona_terry

от mona_terry , 9 дней назад

@terrence

Дополнительно к примеру выше, можно также добавить возможность фильтрации по любому другому полю в объекте данных, реализовав дополнительные Pipes.

Пример создания Pipe для фильтрации по любому полю (предположим, у вас есть объекты данных с разными полями, например, "name" и "age"):

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 в шаблоне компонента, указывая поле, по которому хотите фильтровать данные:

<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.

0 | 0

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

2 ответа

Похожие обсуждения: