Angular实现的table表格排序功能完整示例

Angular是一种流行的前端框架，用于构建Web应用程序。它具有良好的代码结构、模块化和可重用性，而且开发人员可以轻松地添加自定义指令和组件。

本文将通过实现table表格的排序功能来介绍Angular的一些基础知识。我们将使用Angular CLI来建立这个项目，并使用Angular Material来构建表格组件。

1. 创建项目

首先，我们需要确保已经安装了最新版本的Node.js和npm。然后，我们通过Angular CLI来创建新项目。在命令行中运行以下命令：

ng new angular-sort-table

这会在当前目录下创建一个新项目，名为“angular-sort-table”。

2. 添加Angular Material支持

为了使用Angular Material来构建表格组件，我们需要将其添加到项目中。在命令行中运行以下命令：

ng add @angular/material

该命令安装了Angular Material并将其添加到了你的项目中。

3. 创建表格组件

现在我们准备创建一个新的组件，它将使用Angular Material中的表格组件来展示数据。在命令行中运行以下命令：

ng generate @angular/material:table table

这会生成一个名为“table”的新组件，并将其添加到你的项目中。可以在“src/app/table”目录下找到这个组件。

4. 展示数据

现在我们以一些硬编码的方式为表格组件添加一些模拟数据。打开“src/app/table/table.component.ts”文件，并在类定义中添加以下代码：

import { Component, OnInit } from '@angular/core';

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.011, 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.180, symbol: 'Ne'},
];

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  constructor() { }

  ngOnInit(): void {
  }

}

在这个组件中，我们创建了一个接口“PeriodicElement”，表示我们模拟的元素数据。然后我们创建了一个常量“ELEMENT_DATA”，这是我们的模拟数据。

我们将“displayedColumns”设置为表格中显示的列的标题，可以看到我们的数据有四个属性：position、name、weight和symbol。然后我们将“dataSource”设置为元素数据，这样数据就会展示在我们的表格中。

5. 展示表格

现在我们准备在我们的组件视图中展示表格。打开“src/app/table/table.component.html”文件并添加以下代码：

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

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

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

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

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

</mat-table>

在这个模板中，我们使用了Angular Material中的“mat-table”组件。我们使用了四个“ng-container”元素来创建表格的列，每个列有一个标题和一些数据。然后，我们创建了表格的标题行和数据行。

在浏览器中打开项目，你应该可以看到一个简单的表格，显示了我们的模拟数据。

6. 添加排序功能

现在我们准备添加排序功能来使用户能够重新排序表格行。为了实现这一点，我们将使用Angular Material中的“mat-sort-header”指令。

在“src/app/table/table.component.html”中，我们需要在每个表头单元格上引入该指令。修改代码如下所示：

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

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

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

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

现在我们已经为表格头中的每个单元格添加了“mat-sort-header”，它支持排序功能。但是，排序还没有真正生效，我们需要在组件中设置一些代码来实现它。

打开“src/app/table/table.component.ts”文件，并添加以下代码：

`

import { Component, OnInit, ViewChild } from '@angular/core';

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

import { MatTableDataSource } from '@angular/material/table';

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.011, 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