Angular custom filter component

0

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

0

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.

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

0

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.

0

@Kondziowsky:

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.

0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1