Angular custom filter component

Odpowiedz Nowy wątek
2019-09-11 14:43
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ę.

Pozostało 580 znaków

2019-09-11 15:15
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.

Pozostało 580 znaków

2019-09-11 16:38
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ę.

To chyba nie ma co kombinować, zwykły Input będzie git - Kondziowsky 2019-09-12 11:14
Wykorzystałem @Inputa tylko pojawił się problem. Wszystko działa ok jak wpisuje jakieś znaki, ale już przy kasowaniu znaków filtrowanie nie działa. Naprawiłem to tak że robię kopię danych z @Inputa i je filtruje, ale może można inaczej to rozwiązać? - stefan997 2019-09-12 19:08
Szczerze to bez kodu trochę ciężko zgadnąć o co dokładnie chodzi - Kondziowsky 2019-09-12 21:49

Pozostało 580 znaków

2019-09-12 20:07
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.

Pozostało 580 znaków

2019-09-12 22:28
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.

Pozostało 580 znaków

2019-09-13 13:47
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

edytowany 6x, ostatnio: Kondziowsky, 2019-09-13 13:49

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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

Robot: CCBot