Wątek przeniesiony 2018-08-16 09:18 z C# i .NET przez Shalom.

Angular 6 - addytywny pipe

0

Witam.
Mam problem z pipe w angularze. Znalazłem jakiś przykład na necie i przerobiłem go pod siebie

  transform(towary: any[], args: any): any {
    if (args === undefined || args == '') {
      return towary;
    }
    else {
      return towary.filter(it => {
        const kod = it.Kod.toLowerCase().includes(args.toLowerCase());
        const nazwa = it.Nazwa.toLowerCase().includes(args.toLowerCase());
        const ean = it.EAN.toLowerCase().includes(args.toLowerCase());
        const numerKat = it.NumerKatalogowy.toLowerCase().includes(args.toLowerCase());
        return (kod + nazwa + ean + numerKat);
      });
    }
  }

Wyszukiwanie jest kolumnowe w tabelce ale jeśli wpiszę w polu kolumny nazwa jakiś ean to też filtruje dane. Mam dwa wyjścia:

  1. Spróbować to poprawić, ale nie wiem za bardzo jak
  2. Zrobić addytywne szukanie w jednym polu nad tabelką, oddzielając spacją, lecz tego też nie wiem jak zrobić.

Opcja nr 2 wydaje mi się najlepsza.
Czy mogę prosić o jakieś nakierowanie jak napisać funkcję transform żeby przyjmowała spację jako kolejny filter danych?

0

Kod który przedstawiłeś sprawdza czy args znajduje się w dowolnej kolumnie.

  1. Jeżeli dobrze rozumiem, to masz pola do filtrowania oddzielnie dla każdej kolumny.
    Zatem nie możesz sprawdzać czy args występuje w Kod, Nazwa i Ean... ale args związany z kodem sprawdzać z kolumną kodu, args ean tylko w kolumnie ean itd

Treść lambdy it => {} sie zmieni. Natomiast zacząłbym od zmiany args, żeby funkcja dostała nie string (tak założyłem, ze to jest string) tylko strukturę taką jak wiersz tabeli.
args.Kod, args.Nazwa, args.Ean itd miałyby to co zostało wprowadzone do wyszukania.

0

Jak mam zrobić args obiektem skoro do pola wyszukiwania mogę wpisać tylko string. Druga sprawa nawet jakbym zrobił klasę np.:

export class Search {
   public Kod: string;
   public Nazwa: string;
   public EAN: string;
}

To jeśli w swoim komponencie użyje obiektu tego typu jako ngModel to w polu wyszukiwania pojawia mi się [object Object].
Czy tylko mi się wydaje, że Angulary nie przewidziały addytywnego wyszukiwania, czy to ja jestem taki tępy i nie potrafię tego logicznie ogarnąć?

0

A to nie wiem ;p.

Nie wiem też co chcesz osiągnąć. Wydawało mi się że masz wiele pól wyszukiwania. W polach wyszukiwania będą stringi.
Jak się nie da stworzyć obiektu search wypełnić wartościami z pól i przekazać do metody to może transform może być wielo argumentowa i każde pole podane oddzielnie.
Coś w stylu:
transform(towary: any[], kod: any, ean: any ...): any {...}

0

Znalazłem rozwiązanie
stackoverflow

Wrzucę najważniejsze elementy jakie są potrzebne, aby to działało. Może się komuś przyda.

      <input class="form-control mt-3 text-center" style="font-family: 'Nunito Sans', sans-serif;" placeholder="Wyszukaj..." type="text"
        name="dokumentySearch" [(ngModel)]="towarySearch">
          <tbody *ngIf="(towary | async); let towary; else loading;">
            <tr *ngFor="let t of (towary | towaryPipe:[towarySearch]); let i = index">
              <td class="text-center">{{i + 1}}</td>
              <td class="text-center">{{ t.Kod }}</td>
              <td class="text-center">{{ t.Nazwa }}</td>
              <td class="text-center">{{ t.Typ }}</td>
              <td class="text-center">{{ t.EAN }}</td>
              <td class="text-center">{{ t.NumerKatalogowy }}</td>
              <td class="text-center">{{ t.JM }}</td>
              <td class="text-center">{{ t.Ilosc }}</td>
              <td class="text-center">{{ t.Wartosc | currency:' ':'code' }}</td>
              <td class="text-center">{{ t.WartoscPLN | currency:' ':'code' }}</td>
              <td class="text-center">
                <i class="la la-trash"></i>
              </td>
            </tr>
          </tbody>
          <ng-template #loading>
            <tbody>
              <tr>
                <td class="text-center font-30 text-primary" colspan="11">
                  <p class="text-center">ŁADOWANIE <br> Proszę czekać...</p>
                </td>
              </tr>
            </tbody>
          </ng-template>
  transform(towary: Towar[], [term]): any {
    if (towary != null && term) {
      return towary.filter(el => {
        const test = JSON.parse(JSON.stringify(el));

        let testString = JSON.stringify(test);

        Object.keys(test).forEach(k => {
          testString = testString.replace(k, '');
        });

        const terms = term.replace(/[\s]+/gm, ' ').replace(/^[\s]|[\s]$/gm, '').split(' ');
        let containCount = 0;

        terms.forEach(t => {
          if (testString.toLowerCase().indexOf(t.toLowerCase()) > -1) {
            ++containCount;
          }
        });
        return (containCount === terms.length);
      });
    } else {
      return towary;
    }
  }

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