web-dev-qa-db-fra.com

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

Comment puis-je changer Angular Code de l'article ci-dessous, afin que la table de données soit triée par colonne 'nom', ordre croissant par défaut. La flèche (indiquant le sens du tri actuel) doit être affichée.

C'est ce que je veux réaliser:

enter image description here

Code d'origine:

<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'essayais quelque chose comme ça, mais ça ne marche 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

angularangular-material
42
Jacek Kościesza

Vous prenez matSortStart pour matSortDirection.

Essaye ça:

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

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

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

68
Andrew Seguin

Vous pouvez trier la table par programme en appelant la méthode sort(Sortable) de la source de données. En supposant que vous ayez une propriété de composant dataSource 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;
19
Nino Filiu
@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 marcher. démo

Et pour afficher la flèche de direction du tri, ajoutez 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;
}
11
Aman Madiiarbekov

Peut-être avez-vous essayé d'appeler la page de départ la fonction de tri imposé au nom et à la direction?

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

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

@ViewChild(MatSort) matSort: MatSort;

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

Cela mettra également à jour la flèche de mat-sort-header sans solution de contournement.

0
sschmid