Pipes są bardzo ważnym elementem frameworka Angular 2. Dzięki nim możesz transformować i filtrować swoje dane. Ale jak sobie z nimi poradzić?
Zacznijmy od prostej definicji pipe, który filtruje dane:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'filterData',
pure: false
})
export class FilterData implements PipeTransform {
transform(items:any[], args:string[]):any[] {
if (typeof items === 'object') {
var resultArray = [];
if (args.length === 0) {
resultArray = items;
}
else {
for (let item of items) {
if (item.name != null && item.name.match(new RegExp(''+args, 'i'))) {
resultArray.push(item);
}
}
}
return resultArray;
}
else {
return null;
}
}
}
Ten pipe będzie filtrował twoje dane i jako parametr filtrowania przyjmie parametr przekazany jako args:string[]. Więc łatwo gdy chcesz dodać pole tekstowe, które będzie ciągiem filtrującym, musisz połączyć je z twoim pipe w komponencie tak:
<input type="text" #filter (keyup)="0">
Teraz gdy chcesz filtrować dane według ciągu przekazanego do inputa, musisz pobrać wartość elementu #filter tak (filter.data):
<div class="row" *ngFor="let point of (points | filterData: filter.value">
Przekazywanie stringa jako parametru
Aby przekazać więcej parametrów do swojego Pipe, będziesz musiał trochę zmienić definicję Pipe:
export class FilterData implements PipeTransform {
transform(items:any[], args:string[], additionl):any[] {
console.log(additionl);
Jak widzisz, po prostu przekazujesz nowy parametr do swojego Pipe. Teraz gdy chcesz przekazać go z szablonu, musisz dodać go tak jak w przykładzie:
<div class="row" *ngFor="let point of (points | filterData: filter.value : 'name')">
Po tym zobaczysz, że przekazany parametr 'name' zostanie wyświetlony w konsoli.
Przekazywanie tablicy jako parametru
Ale co jeśli chcesz przekazać tablicę elementów? To też jest możliwe! Możesz to zrobić tak bez zmiany definicji Pipe.
<div class="row" *ngFor="let point of (points | filterData: filter.value : ['all','name'])">
Przekazywanie obiektu jako parametru
Tak, możesz przekazać obiekt jako parametr do swojego pipe. Nie jesteś ograniczony gdy chcesz przekazać więcej niż jeden parametr - możesz też przekazać obiekt parametrów. Aby to zrobić, możesz po prostu zrobić to z szablonu swojego komponentu jak opisano w przykładzie kodu:
<div class="row" *ngFor="let point of (points | filterData: filter.value : {name: true})">
Więc to może być baza do rozszerzenia twoich pipes! Nie musisz opierać się na jednym przekazanym elemencie!
