角度材料中的默認排序 - 排序標題

Question

如何更改下面的角度材料代碼，以便數據表按「名稱」列排序，缺省情況下升序排列。必須顯示箭頭（表示當前的排序方向）。

這就是我想要達到的目標：

原始代碼：

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

我是想這樣的事情，但它不工作（沒有顯示箭頭，而不是排序）

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

這裏是鏈接到

Answer 1

你錯了matSortStart爲matSortDirection。

嘗試這種情況：

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

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

matSortStart可以用來逆轉使用的循環時的排序（例如，當用戶點擊進行排序，它開始於降序而不是升序）。

Answer 2

也許你試圖調用頁面初始化的名稱和方向上強制的排序功能？

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