Jak mogę zmienić poniższy kod materiału kątowego, aby tabela danych była domyślnie sortowana według kolumny „nazwa”, w kolejności rosnącej. Musi być wyświetlona strzałka (wskazująca aktualny kierunek sortowania).
Oto, co chcę osiągnąć:
Oryginalny kod:
<table matSort (matSortChange)="sortData($event)">
<tr>
<th mat-sort-header="name">Dessert (100g)</th>
<th mat-sort-header="calories">Calories</th>
<th mat-sort-header="fat">Fat (g)</th>
<th mat-sort-header="carbs">Carbs (g)</th>
<th mat-sort-header="protein">Protein (g)</th>
</tr>
<tr *ngFor="let dessert of sortedData">
<td>{{dessert.name}}</td>
<td>{{dessert.calories}}</td>
<td>{{dessert.fat}}</td>
<td>{{dessert.carbs}}</td>
<td>{{dessert.protein}}</td>
</tr>
</table>
Próbowałem czegoś takiego, ale to nie działa (brak strzałki, nie posortowano)
<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>
Oto link do Plunkera
angular
angular-material
Jacek Kościesza
źródło
źródło
this.sortData({active: "name", direction: "asc"})
nangOnInit
check plunkerOdpowiedzi:
Mylisz się
matSortStart
zmatSortDirection
.Spróbuj tego:
https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview
matSortStart
może służyć do odwrócenia cyklu używanego podczas sortowania (np. gdy użytkownik klika, aby posortować, zaczyna się od desc zamiast asc).źródło
matSortActive
i,matSortDirection
ale mała strzałka nie jest wyświetlanaMożesz programowo posortować tabelę, wywołując
sort(Sortable)
metodę źródła danych. Zakładając, że maszdataSource
właściwość komponentu dla źródła danych:źródło
matSortChange
zdarzenie. Czy istnieje sposób na ustawienie sortowania bez wyzwalania zdarzenia?asc
/desc
z kolumny i jeśli jest wywoływane za każdym razem, gdy strona jest ładowana, to za każdym razem będzie inaczejpowinno działać. próbny
Aby wyświetlić strzałkę kierunku sortowania, dodaj następny plik CSS (obejście)
źródło
Aktualizacja dla materiału (testowana z wersją 7.3):
Spowoduje to również zaktualizowanie
mat-sort-header
strzałki bez żadnego obejściaźródło
Możesz również powiązać właściwości sortowania mat-table ze zmienną komponentu.
Jak mówi @Andrew Seguin:
Jest to właściwy sposób ustawienia domyślnego sortowania, jeśli wiesz, które to jest.
W przypadku, gdy otrzymujesz sortowanie z innego miejsca (w moim przypadku z parametrów ciągu zapytania), możesz to również zrobić w ten sposób (strzałki sortowania działają tutaj idealnie):
źródło
Może próbowałeś wywołać na początku strony funkcję sortowania wymuszoną na nazwie i kierunku?
źródło
W moim przypadku sortowanie nie działało, ponieważ matColumDef id i mat-cell var są różne
po wprowadzeniu zmian matColumnDef = "firstName" na matColumnDef = " name ", czyli to samo co item. Nazwa
to działa dobrze dla mnie
źródło
Musiałem zrobić domyślne sortowanie podczas ładowania
źródło
Odpowiedź od @Andrew Seguin (pierwsza i zaakceptowana odpowiedź) zrobiła dla mnie wizualną sztuczkę, ale nie posortowała tabeli.
Moim rozwiązaniem jest użycie kodu html dostarczonego przez @Andrew Seguin i samodzielne wywołanie metody sortData (sort: Sort) , ale jak to zrobić? Jak określono w dokumentacji , `` Sort '' to interfejs, który ma dwie właściwości, aktywną i kierunkową, a interfejs musi wyglądać mniej więcej tak:
Sztuczka polega więc na wywołaniu metody sortData (sort: Sort) w ngOnInit w następujący sposób:
Kod HTML jest taki, jak w zaakceptowanej odpowiedzi ;-) Mam nadzieję, że to pomoże każdemu, Alex
Przykłady dokumentacji
źródło