Sắp xếp mặc định trong Angular Material - Tiêu đề sắp xếp

Làm cách nào để thay đổi mã Angular Material bên dưới, để bảng dữ liệu được sắp xếp theo cột 'tên', thứ tự tăng dần theo mặc định. Mũi tên (cho biết hướng sắp xếp hiện tại) phải được hiển thị.

Đây là những gì tôi muốn đạt được:

Mã gốc:

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

Tôi đã thử một cái gì đó như thế này, nhưng nó không hoạt động (không có mũi tên hiển thị, không được sắp xếp)

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

Đây là liên kết đến Plunker

Bạn đang nhầm matSortStartvới matSortDirection.

Thử đi:

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

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

matSortStart có thể được sử dụng để đảo ngược chu trình được sử dụng khi sắp xếp (ví dụ: khi người dùng nhấp vào để sắp xếp, nó bắt đầu tại desc thay vì asc).

Bạn có thể sắp xếp bảng theo chương trình bằng cách gọi sort(Sortable)phương thức của nguồn dữ liệu. Giả sử bạn có thuộc tính dataSourcethành phần cho nguồn dữ liệu:

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;

@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

nên làm việc. bản giới thiệu

Và để hiển thị mũi tên hướng sắp xếp, hãy thêm css tiếp theo (giải pháp thay thế)

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

Cập nhật cho Vật liệu (được thử nghiệm với v7.3):

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

Điều này cũng sẽ cập nhật mat-sort-headermũi tên của mà không có bất kỳ giải pháp nào

Bạn cũng có thể liên kết thuộc tính sắp xếp bảng mat với biến thành phần của mình.

Như @Andrew Seguin nói:

<table matSort matSortActive="name" matSortDirection="asc">

Đây là cách thích hợp để đặt sắp xếp mặc định nếu bạn biết cái nào là cái đó.

Trong trường hợp bạn sắp xếp từ một nơi khác (trong trường hợp của tôi là từ các tham số chuỗi truy vấn), bạn cũng có thể làm như thế này (các mũi tên sắp xếp hoạt động hoàn hảo ở đây):

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

Có thể bạn đã cố gắng gọi trên init của trang hàm sắp xếp bắt buộc về tên và hướng chưa?

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

Trong trường hợp của tôi, sắp xếp không hoạt động vì id matColumDef và mat-cell var khác nhau

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

sau khi thực hiện thay đổi matColumnDef = "firstName" thành matColumnDef = " name " giống với mục. Tên

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

Việc này ổn với tôi

Tôi đã phải sắp xếp mặc định khi tải

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

Câu trả lời từ @Andrew Seguin (câu trả lời đầu tiên và được chấp nhận) đã đánh lừa thị giác đối với tôi, nhưng nó không sắp xếp được bảng.

Giải pháp của tôi là sử dụng mã html được cung cấp bởi @Andrew Seguin và tự mình gọi phương thức sortData (sort: Sắp xếp) , nhưng làm thế nào để thực hiện điều đó? Như được chỉ định trong tài liệu , '' Sắp xếp '' là một giao diện có hai thuộc tính, hoạt động và hướng và giao diện phải trông giống như vậy:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

Vì vậy, mẹo là gọi phương thức sortData (sort: Sắp xếp) trong ngOnInit như sau:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

Mã HTML giống như trong câu trả lời được chấp nhận ;-) Hy vọng điều này sẽ giúp ích cho mọi người, Alex

Các ví dụ về tài liệu