Nie jestem w stanie przetłumaczyć tego kodu z Angualr 1 na Angular 2:
ng-repeat="todo in todos | orderBy: 'completed'"
Oto, co zrobiłem zgodnie z odpowiedzią Thierry Templier:
Szablon komponentu:
*ngFor="#todo of todos | sort"
Kod komponentu:
@Component({
selector: 'my-app',
templateUrl: "./app/todo-list.component.html",
providers: [TodoService],
pipes: [ TodosSortPipe ]
})
Kod rury:
import { Pipe } from "angular2/core";
import {Todo} from './todo';
@Pipe({
name: "sort"
})
export class TodosSortPipe {
transform(array: Array<Todo>, args: string): Array<Todo> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
Próbuję posortować tablicę Todo
s uporządkowaną według właściwości completed
. Najpierw, todo.completed = false
a potem todo.complete = true
.
Nie rozumiem zbyt dobrze transform
metody i sposobu przekazywania argumentów w tej metodzie i sort
metodzie.
Jaki jest args: string
argument? Czym są a
i b
skąd pochodzą?
angular
angular2-template
angular-pipe
Alexander Abakumov
źródło
źródło
Odpowiedzi:
Zmodyfikowałem odpowiedź @Thierry Templier, aby rura mogła sortować niestandardowe obiekty w kątowym 4:
I aby z niego skorzystać:
Mam nadzieję, że to komuś pomoże.
źródło
The pipe 'sort' could not be found
. Czy mogę w jakiś sposób wstrzyknąć rurę do mojego komponentu, tak jak w 2 rurach kątowych: [ArraySortPipe]?Pełną dyskusję można znaleźć pod adresem https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe . Ten cytat jest najbardziej odpowiedni. Zasadniczo w przypadku aplikacji na dużą skalę, które powinny być zminimalizowane agresywnie, logika filtrowania i sortowania powinna zostać przeniesiona do samego składnika.
źródło
filteredHeroes
isortedHeroes
, myślę, że chodzi o to, że podczas inicjowania komponentu uruchomisz logikę sortowania / filtrowania (być może wywołując metodę z ngOnInit), a następnie ustawiając tę właściwość z posortowanymi / przefiltrowanymi wynikami i uruchom ponownie logikę / zaktualizuj właściwość tylko wtedy, gdy jest coś, co wyzwala potrzebę (np. interakcja użytkownika wyzwala wywołanie AJAX, aby uzyskać więcej bohaterów, lub użytkownik klika pole wyboru, aby odfiltrować połowę z nich na podstawie pewnych kryteriów itp.)Możesz zaimplementować w tym celu niestandardowy potok, który wykorzystuje
sort
metodę tablic:A następnie użyj tej rury, jak opisano poniżej. Nie zapomnij podać swojej rury w
pipes
atrybucie komponentu:Jest to prosty przykład dla tablic z wartościami łańcuchowymi, ale możesz mieć zaawansowane przetwarzanie sortowania (oparte na atrybutach obiektów w przypadku tablicy obiektów, na podstawie parametrów sortowania, ...).
Oto plunkr do tego: https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview .
Mam nadzieję, że ci to pomoże, Thierry
źródło
sort
metoda jest metodąArray
obiektu JavaScript . Zobacz ten link: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .pipes: [..]
deklaracja nieważne (i nie jest to konieczne) jestZaktualizowany OrderByPipe: naprawiono brak sortowania ciągów.
utwórz klasę OrderByPipe:
w kontrolerze:
lub w twoim
w Twoim html:
źródło
Angular nie jest dostarczany z filtrem orderBy po wyjęciu z pudełka, ale jeśli zdecydujemy, że go potrzebujemy, możemy go łatwo zrobić. Są jednak pewne zastrzeżenia, o których musimy wiedzieć, jeśli chodzi o szybkość i minifikację. Zobacz poniżej.
Prosta rura wyglądałaby mniej więcej tak.
Ten potok akceptuje funkcję sortowania (
fn
) i nadaje jej domyślną wartość, która posortuje tablicę prymitywów w rozsądny sposób. Jeśli chcemy, mamy możliwość nadpisania tej funkcji sortowania.Nie akceptuje nazwy atrybutu jako łańcucha, ponieważ nazwy atrybutów podlegają minifikacji. Zmienią się, gdy zminimalizujemy nasz kod, ale minifier nie są wystarczająco inteligentne, aby również zminimalizować wartość w ciągu szablonu.
Sortowanie prymitywów (liczb i łańcuchów)
Moglibyśmy użyć tego do posortowania tablicy liczb lub ciągów za pomocą domyślnego komparatora:
Sortowanie tablicy obiektów
Jeśli chcemy posortować tablicę obiektów, możemy nadać jej funkcję komparatora.
Ostrzeżenia - czyste vs. nieczyste rury
Angular 2 ma koncepcję czystych i nieczystych rur.
Czysta rura optymalizuje wykrywanie zmian przy użyciu tożsamości obiektu. Oznacza to, że potok będzie działał tylko wtedy, gdy obiekt wejściowy zmieni tożsamość, na przykład jeśli dodamy nowy element do tablicy. Nie opuści się w przedmioty. Oznacza to, że jeśli zmienimy zagnieżdżony atrybut:
this.cats[2].name = "Fluffy"
na przykład potok nie zostanie ponownie uruchomiony. To pomaga Angularowi być szybkim. Rury kątowe są domyślnie czyste.Z drugiej strony nieczysta potok sprawdzi atrybuty obiektu. To potencjalnie sprawia, że jest znacznie wolniejszy. Ponieważ nie może zagwarantować, co zrobi funkcja potoku (być może na przykład posortuje inaczej w zależności od pory dnia), zanieczyszczony potok będzie działał za każdym razem, gdy wystąpi zdarzenie asynchroniczne. Spowoduje to znaczne spowolnienie działania aplikacji, jeśli macierz jest duża.
Rura powyżej jest czysta. Oznacza to, że będzie działać tylko wtedy, gdy obiekty w tablicy są niezmienne. Jeśli zmienisz kota, musisz zastąpić cały obiekt kota nowym.
Możemy zmienić powyższe na nieczystą potokę, ustawiając czysty atrybut:
Ta rura będzie schodzić w obiekty, ale będzie wolniejsza. Używaj ostrożnie.
źródło
Stworzyłem rurę OrderBy, która robi dokładnie to, czego potrzebujesz. Obsługuje również możliwość sortowania według wielu kolumn wyliczalnych obiektów.
Ten potok pozwala na dodawanie kolejnych elementów do tablicy po wyrenderowaniu strony i dynamicznie sortuje tablicę z aktualizacjami.
Mam tutaj opis tego procesu .
A oto działające demo: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby i https://plnkr.co/edit/DHLVc0?p=info
źródło
Zalecamy użycie lodash z kątownikiem, wtedy twoja rura będzie następna:
i używaj go w formacie HTML
i nie zapomnij dodać Pipe do swojego modułu
źródło
To zadziała dla każdego pola, które do niego przekażesz. ( WAŻNE: uporządkuje tylko alfabetycznie, więc jeśli przekażesz datę, uporządkuje ją jako alfabet, a nie jako datę)
źródło
@Component
nie mapipes
własności.Jest to dobry zamiennik dla rury Orderby AngularJs w kątowej 4 . Łatwy i prosty w użyciu.
To jest adres URL github, aby uzyskać więcej informacji https://github.com/VadimDez/ngx-order-pipe
źródło
Jak wiemy, filter i order by zostały usunięte z ANGULAR 2 i musimy napisać własne, oto dobry przykład na plunker i szczegółowy artykuł
Używał zarówno filtra, jak i orderby, oto kod dla zamówienia potoku
źródło
Możesz tego użyć dla obiektów:
źródło
W pliku package.json dodaj coś takiego (ta wersja jest odpowiednia dla Angulara 2):
W swoim module maszynopisu (i tablicy importów):
źródło
źródło
W aktualnej wersji Angular2 potoki orderBy i ArraySort nie są obsługiwane. Musisz napisać / użyć do tego niestandardowych potoków.
źródło
Dla wersji Angular 5+ możemy użyć pakietu ngx-order-pipe
Link do samouczka źródła
Zainstaluj pakiet
Moduł importu w aplikacjach
używać wszędzie
źródło
orderby Pipe w Angular JS będzie obsługiwać, ale Angular (wyższe wersje) nie będzie obsługiwać . Proszę znaleźć szczegóły omówione w celu zwiększenia szybkości działania, jego przestarzałe.
https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
źródło
źródło