Tworzę sobie customowy component do filtorwania i zastanawiam się jak najlepiej przekazać tablicę do filtrowania do componentu.
@Input to dobry pomysł, bo później muszę na tej tablicy wykonywać jakies operację.
To ma być customowy component, który po prostu ogarnia Tobie kod w jakimś jednym widoku czy generyczny per aplikacja?
Po pierwsze - szukałeś gotowego komponentu do filtrowania po tabeli?
Jeśli generyczny to imo najlepsze wyjśćie to przekazać jego stan z zewnątrz, aby on tylko obsługiwał to co dostanie.
MuadibAtrides napisał(a):
To ma być customowy component, który po prostu ogarnia Tobie kod w jakimś jednym widoku czy generyczny per aplikacja?
Po pierwsze - szukałeś gotowego komponentu do filtrowania po tabeli?
Jeśli generyczny to imo najlepsze wyjśćie to przekazać jego stan z zewnątrz, aby on tylko obsługiwał to co dostanie.
Oczywiście szukałem i Material czy Bootstrap ma takie funkcjonalności ale chciałbym własną implementację napisać bo dużo czasu to nie zajmie.
Komponent chciałbym używać w paru miejscach dlatego chcę przekazywać do niego tablicę.
Jeśli dane będą różne - to Twój komponent powinien być bezstanowy i przyjmować wszystko inputem.
Jeśli dane takie same, to zaciągają w komponencie dane przez serwis.
export class FilterComponent implements OnInit {
@Input()
filterList: [];
private _filterText: string;
filtered: [];
listToFilter: any;
get filterText() {
return this._filterText;
}
set filterText(value: string) {
this._filterText = value;
this.filtered = this.filter(this._filterText);
}
filter(filterText: string) {
return this.listToFilter.filter( employee =>
employee.name.toLowerCase().indexOf(filterText.toLowerCase()) !== -1);
}
constructor() { }
ngOnInit() {
this.listToFilter = this.filterList;
}
}
Bez linijki w ngOnInit filtrowanie nie działa poprawnie. Po przefiltrowaniu do 1 elementu i skasowaniu filtra nowe elementy już się nie pojawiają, zostajemy z 1 elmentem na liście.
No tak, wprowadzając dane poprzez @Input, musisz liczyć się z tym, że pracujemy na tym samym obiekcie, który został przekazany. Tym bardziej, że zwracasz od razu filtrowaną listę. Spróbowałbym bez ngOnInit'a jeszcze w ten sposób:
filter(filterText: string) {
let przefiltrowanaLista = this.filterList.filter( employee =>
employee.name.toLowerCase().indexOf(filterText.toLowerCase()) !== -1);
return przefiltrowanaLista;
}
To powinno zadziałać z tego co tak na szybko rozumuję :P