[解決済み] Angular Materialでのデフォルトのソート - ヘッダーのソート

質問

以下のAngular Materialのコードをどのように変更すれば、データテーブルがデフォルトで昇順で「name」カラムによってソートされるようになりますか？矢印（現在のソート方向を示す）を表示する必要があります。

これは私が達成したいことです。

オリジナルのコードです。

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

以下、リンク先 プランカー

どのように解決するのですか？

間違っている matSortStart を matSortDirection .

これを試してみてください。

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

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

matSortStart は、ソート時に使用されるサイクルを逆転させるために使用することができます（例えば、ユーザーがソートをクリックすると、昇順ではなく降順で開始されます）。

編集: 更新された例を提供してくれたBenに感謝します。