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

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

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

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;

@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;
}

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

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">

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);
  }

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

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

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