¿Cómo puedo cambiar el código de material angular a continuación, de modo que la tabla de datos esté ordenada por la columna 'nombre', en orden ascendente de forma predeterminada? Se debe mostrar la flecha (que indica la dirección de clasificación actual).
Esto es lo que quiero lograr:
Codigo 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>
Estaba intentando algo como esto, pero no funciona (no se muestra ninguna flecha, no está ordenada)
<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>
Aquí está el enlace a Plunker
this.sortData({active: "name", direction: "asc"})
alngOnInit
cheque plunker