각도 재료의 기본 정렬 - 정렬 헤더

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의 내림차순 시작) 할 때 사용되는 사이클을 반전하는 데 사용될 수

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