Вы правильно угадали, мы будем использовать кастомную трубу!
Мы собираемся создать функцию поиска, чтобы фильтровать города США по названию.
Итак, все, что вам нужно, это массив данных для фильтрации и поле ввода для захвата пользовательского ввода. В этом примере это список городов, которые нужно отфильтровать по названию.
Шаг 1. Создайте канал с помощью ng g pipe <name>
или вручную напишите класс канала и реализуйте PipeTransform
интерфейс.
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): unknown { return null; } }
Angular вызывает метод
transform
со значением привязки в качестве первого аргумента и любыми параметрами в качестве второго аргумента в форме списка и возвращает преобразованное значение.
Вышеупомянутый метод преобразования по умолчанию еще ничего не делает. Давайте сделаем волшебство.
Шаг 2. Напишите логику для фильтрации данных.
// value - array of cities // input - user input in search box // when there is an input, filter & return all matches // when there is no input, display all data // filter() is a javascript method that returns a new array of all values that pass a test defined in the method. You can read more here transform(value: any, input: any): any { if (input) { return value.filter(val => val.indexOf(input)) >= 0); } else { return value; } }
Вот и все. Выполнено. 😀
Шутя! нам все еще нужно связать этот канал с шаблоном HTML, чтобы данные передавались.
Шаг 3. Не забудьте включить настраиваемый канал в качестве объявления в модуль приложения:
import { FilterPipe } from './filter/filter.pipe';
Шаг 4: Теперь добавьте пользовательский канал (в этом примере FilterPipe
) в свой HTML-шаблон как:
//cityName gets user input that is passed to Pipe transform method mentioned in Step 1 <input type="search" [(ngModel)] = cityName> <div *ngFor="let city of cities | FilterPipe: cityName"> {{city}} </div>
Используйте ngModel
для привязки динамического ввода от пользователя к cityName
Вот и все.
В прямом эфире на https://findthycity.herokuapp.com
GitHub: https://github.com/puneetpalkaur/findthycity
Официальный документ по Angular: https://angular.io/guide/pipes