Angular Material 中的默认排序 - 排序标题 [英] Default sorting in Angular Material - Sort header

问题描述

如何更改下面的 Angular Material 代码，以便数据表按名称"列排序，默认情况下是升序.必须显示箭头(指示当前排序方向).

How can I change Angular Material code below, so that data-table is sorted by 'name' column, ascending order by default. Arrow (indicating current sort direction) must be displayed.

这就是我想要实现的:

原始代码:

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

我正在尝试这样的事情，但它不起作用(没有显示箭头，没有排序)

I was trying something like this, but it doesn't work (no arrow displayed, not sorted)

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

这是 Plunker

推荐答案

你把 matSortStart 误认为 matSortDirection.

试试这个:

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

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

matSortStart 可用于反转排序时使用的循环(例如，当用户点击排序时，它从 desc 而不是 asc 开始).

matSortStart can be used to reverse the cycle used when sort (e.g. when the user clicks to sort, it starts at desc instead of asc).

感谢 Ben 提供更新的示例

Thanks Ben for providing an updated example

这篇关于Angular Material 中的默认排序 - 排序标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！