Tri par défaut dans Angular Material - En-tête de tri

Question

Comment puis-je modifier le code Angular Material ci-dessous, afin que la table de données soit triée par la colonne 'nom', par ordre croissant par défaut. La flèche (indiquant la direction actuelle du tri) doit être affichée.

C'est ce que je veux réaliser :

Code original :

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

J'ai essayé quelque chose comme ça, mais ça ne fonctionne pas (pas de flèche affichée, pas de tri).

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

Voici le lien vers Plunker

Answer 1

Vous vous trompez. matSortStart pour matSortDirection .

Essayez ça :

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

https://stackblitz.com/edit/angular-defaultsort?file=src/app/sort-overview-example.html

matSortStart peut être utilisé pour inverser le cycle utilisé lors du tri (par exemple, lorsque l'utilisateur clique pour trier, le tri commence par desc au lieu de asc).

Edit : Merci Ben d'avoir fourni un exemple mis à jour

Answer 2

Vous pouvez trier le tableau de manière programmatique en invoquant la fonction sort(Sortable) de la source de données. En supposant que vous avez une dataSource propriété du composant pour la source de données :

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

Answer 3

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

devrait fonctionner. Démonstration

Et pour afficher la flèche de direction du tri, ajoutez le css suivant (solution de contournement)

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

Answer 4

Mise à jour pour le matériel (testé avec la v7.3) :

@ViewChild(MatSort) matSort: MatSort;

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

Cela permettra également de mettre à jour le mat-sort-header sans aucune solution de rechange

Answer 5

Peut-être avez-vous essayé d'appeler sur le init de la page la fonction de tri forcée sur le nom et la direction ?

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