Domyślne sortowanie w materiałach kątowych - nagłówek sortowania

85

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ąć:

wprowadź opis obrazu tutaj

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

Jacek Kościesza
źródło
Mógł zadzwonić this.sortData({active: "name", direction: "asc"})na ngOnInitcheck plunker
Pankaj Parkar
1
@PankajParkar To nie jest poprawne rozwiązanie. Tabela jest posortowana, ale nagłówek sortowania o tym nie wie, a strzałka (wskazująca aktualny kierunek sortowania) nie jest wyświetlana.
Jacek Kościesza

Odpowiedzi:

134

Mylisz się matSortStartz matSortDirection.

Spróbuj tego:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

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

Andrew Seguin
źródło
4
Ta metoda działa tylko po raz pierwszy. Po zmianie źródła danych tabeli próbuję ponownie ustawić matSortActivei, matSortDirectionale mała strzałka nie jest wyświetlana
Gil Epshtain
Próbka wydaje się już nie działać, zrobiłem nową: stackblitz.com/edit/angular-defaultsort?file=src/app/…
Ben
45

Możesz programowo posortować tabelę, wywołując sort(Sortable)metodę źródła danych. Zakładając, że masz dataSourcewłaściwość komponentu dla źródła danych:

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;
Nino Filiu
źródło
1
To jest coś, czego szukam, ale jedynym problemem jest to, że wyzwala matSortChangezdarzenie. Czy istnieje sposób na ustawienie sortowania bez wyzwalania zdarzenia?
deszcz 1
Nie. Tak nazywa się ten rodzaj. Dlaczego nie chcesz, aby wyzwalane było zdarzenie matSortChange?
Nino Filiu
1
ponieważ mam ustawione aktualizowanie pliku cookie z asc/ descz kolumny i jeśli jest wywoływane za każdym razem, gdy strona jest ładowana, to za każdym razem będzie inaczej
deszcz 01
16
@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

powinno działać. próbny

Aby wyświetlić strzałkę kierunku sortowania, dodaj następny plik CSS (obejście)

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
Aman Madiiarbekov
źródło
2
Podaj kilka wyjaśnień wraz z kodem, aby późniejszy użytkownik mógł łatwiej śledzić swoje pomysły / kod.
HansHirse
1
Użyłem sortowania z Nino i obejścia CSS tutaj, aby uzyskać sortowanie ustawione programowo, aby pokazać strzałkę.
bts
W kątowym 7 ustawiłem this.sort = {active: 'name', direction: 'desc'}; i nie musiałem dodawać żadnych zmian CSS, aby strzałka była aktywna.
Nick Gallimore
Nick Gallimore może dodajesz swój CSS w niewłaściwym miejscu? spróbuj dodać go do głównego globalnego pliku css (może znajdować się w pliku
asset
10

Aktualizacja dla materiału (testowana z wersją 7.3):

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

Spowoduje to również zaktualizowanie mat-sort-headerstrzałki bez żadnego obejścia

sschmid
źródło
2

Możesz również powiązać właściwości sortowania mat-table ze zmienną komponentu.

Jak mówi @Andrew Seguin:

<table matSort matSortActive="name" matSortDirection="asc">

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):

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">
Milos
źródło
1

Może próbowałeś wywołać na początku strony funkcję sortowania wymuszoną na nazwie i kierunku?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }
federico scamuzzi
źródło
5
To nie jest poprawne rozwiązanie. Tabela jest posortowana, ale nagłówek Sortuj o tym nie wie, a strzałka (wskazująca aktualny kierunek sortowania) nie jest wyświetlana
Jacek Kościesza
1

W moim przypadku sortowanie nie działało, ponieważ matColumDef id i mat-cell var są różne

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

po wprowadzeniu zmian matColumnDef = "firstName" na matColumnDef = " name ", czyli to samo co item. Nazwa

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

to działa dobrze dla mnie

Yogesh Borkhade
źródło
0

Musiałem zrobić domyślne sortowanie podczas ładowania

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);
Illia
źródło
0

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:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

Sztuczka polega więc na wywołaniu metody sortData (sort: Sort) w ngOnInit w następujący sposób:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

Kod HTML jest taki, jak w zaakceptowanej odpowiedzi ;-) Mam nadzieję, że to pomoże każdemu, Alex

Przykłady dokumentacji

Alex B.
źródło