角度材料でのデフォルトソート - ソートヘッダ

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> 

ここはへのリンクです10

Answer 1

あなたはmatSortDirectionためmatSortStartを勘違いしています。

これを試してください。ソートは、（ユーザーが並べ替えるために、クリックしたとき、例えば、それは代わりに、ASCのDESCで開始）するときに使用されるサイクルを逆転するために使用することができる

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