Angular Material 7 – 排序表头

在Angular应用程序中使用表格展示数据是一个很常见的需求，而排序表头是使表格变得更加友好和实用的一个重要特性。在Angular Material 7中，我们可以通过使用MatSort指令实现对表头的排序操作。

使用MatSort指令

在开始之前，我们需要先安装Angular Material和MatSort模块。在项目中，我们可以通过以下命令来安装：

npm install --save @angular/material @angular/cdk

接下来，我们需要在NgModule中进行配置。在app.module.ts文件中，我们需要添加如下代码：

import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatSortModule
  ]
})
export class AppModule { }

我们需要导入MatSortModule模块并将其添加到imports数组中。

现在我们已经准备好在表格中使用MatSort了。我们需要在模板中添加MatSort指令，并将其绑定到表格的matSort属性上。我们还需要添加一个button来触发排序操作。下面是一个示例表格模板：

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<button mat-raised-button (click)="onSortData($event)">Sort</button>

我们需要使用mat-table指令、matColumnDef指令和*matCellDef指令来定义表格的结构。mat-sort-header指令用来绑定排序事件，mat-header-cell用来指定表头单元格，mat-row用来指定每行数据。在上述例子中，我们定义了四个表头单元格，并使用mat-sort-header指令绑定了排序事件。

最后一个操作是在组件类中处理排序事件。我们需要使用MatSort指令中提供的方法进行排序，并刷新数据源。下面是一个示例组件类：

import { Component, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.81, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0119, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.007, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.999, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.998, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.18, symbol: 'Ne'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

  onSortData(event) {
    const sort = event.target.value;
    if (sort === 'asc') {
      this.dataSource.sort.sort({id: 'position', start: 'asc', disableClear: false});
    } else if (sort === 'desc') {
      this.dataSource.sort.sort({id: 'position', start: 'desc', disableClear: false});
    } else {
      this.dataSource.sort.sort({id: '', start: 'desc', disableClear: false});
    }
    this.dataSource = [...this.dataSource];
  }
}

在上述代码中，我们定义了一个PeriodicElement接口和一个常量数组ELEMENT_DATA。然后我们在组件类中定义了displayedColumns和dataSource属性，并在ngOnInit方法中将sort属性绑定到数据源中。

最后，在onSortData方法中，我们根据排序方式进行排序，并更新数据源。我们需要注意的是，由于sort方法没有更新dataSource，所以我们需要手动进行更新。