Standardsortierung in Winkelmaterial - Kopfzeile sortieren

Wie kann ich den unten stehenden Winkelmaterialcode so ändern, dass die Datentabelle nach der Spalte 'Name' sortiert ist, standardmäßig in aufsteigender Reihenfolge. Der Pfeil (zeigt die aktuelle Sortierrichtung an) muss angezeigt werden.

Folgendes möchte ich erreichen:

Originalcode:

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

Ich habe so etwas versucht, aber es funktioniert nicht (kein Pfeil angezeigt, nicht sortiert)

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

Hier ist der Link zu Plunker

Sie verwechseln matSortStartmit matSortDirection.

Versuche dies:

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

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart kann verwendet werden, um den beim Sortieren verwendeten Zyklus umzukehren (z. B. wenn der Benutzer zum Sortieren klickt, beginnt er bei desc anstelle von asc).

Sie können die Tabelle programmgesteuert sortieren, indem Sie die sort(Sortable)Methode der Datenquelle aufrufen . Angenommen, Sie haben eine dataSourceKomponenteneigenschaft für die Datenquelle:

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

sollte arbeiten. Demo

Und um den Pfeil für die Sortierrichtung anzuzeigen, fügen Sie das nächste CSS hinzu (Problemumgehung).

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

Update für Material (getestet mit v7.3):

@ViewChild(MatSort) matSort: MatSort;

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

Dadurch wird auch der mat-sort-headerPfeil des Pfads ohne Problemumgehung aktualisiert

Sie können auch Sortierungseigenschaften für Mat-Tabellen an Ihre Komponentenvariable binden.

Wie @ Andrew Seguin sagt:

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

Dies ist der richtige Weg, um die Standardsortierung festzulegen, wenn Sie wissen, welche das ist.

Falls Sie von einem anderen Ort aus sortieren (in meinem Fall von Abfragezeichenfolgenparametern), können Sie dies auch folgendermaßen tun (Sortierpfeile funktionieren hier perfekt):

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


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

Vielleicht haben Sie versucht, auf der Init der Seite die Sortierfunktion aufzurufen, die dem Namen und der Richtung auferlegt wurde?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

In meinem Fall funktionierte die Sortierung nicht, da sich matColumDef id und mat-cell var unterscheiden

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

nach Änderungen matColumnDef = "firstName" in matColumnDef = " name ", was mit item identisch ist. Name

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

es funktioniert gut für mich

Ich musste beim Laden die Standardsortierung vornehmen

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

Die Antwort von @Andrew Seguin (erste und akzeptierte Antwort) hat den visuellen Trick für mich getan, aber die Tabelle nicht sortiert .

Meine Lösung besteht darin, den von @Andrew Seguin bereitgestellten HTML-Code zu verwenden und die Methode sortData (sort: Sort) selbst aufzurufen. Aber wie geht das? Wie in der Dokumentation angegeben , ist das ,, Sortieren '' eine Schnittstelle, die zwei Eigenschaften hat, aktiv und Richtung, und die Schnittstelle muss ungefähr so ​​aussehen:

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

Der Trick besteht also darin, die sortData-Methode (sort: Sort) in ngOnInit wie folgt aufzurufen:

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

Der HTML-Code ist wie in der akzeptierten Antwort ;-) Hoffe das hilft jedem, Alex

Dokumentationsbeispiele