Angular Material 表格组件使用指南-JavaScript中文网-JavaScript教程资源分享门户

Angular Material 是一个以谷歌 Material Design 设计原则为基础的 UI 组件库，其中包括了丰富的组件，如表格组件，可以极大地提高开发效率。本篇文章将为你详细介绍如何使用 Angular Material 的表格组件。

安装与引入

在开始使用 Angular Material 的表格组件之前，需要先在项目中安装和引入 Angular Material。在项目根目录下的终端中运行以下命令即可完成安装：

npm install @angular/material

安装完成后，在项目的 app.module.ts 中引入 MatTableModule 模块和 MatPaginatorModule 模块即可使用表格组件：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建表格数据源

在使用 Angular Material 的表格组件时，需要先创建一个数据源。可以使用 MatTableDataSource 类来创建一个数据源，并传入要展示的数据。

// www.javascriptcn.com code example
import { Component } from '@angular/core';
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'},
  // more items
];

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

在以上代码中，PeriodicElement 是一个接口类型，定义了数据源中的数据格式。 ELEMENT_DATA 是一个包含多条数据的数组，并使用 MatTableDataSource 类创建了一个数据源，可以将其传递给表格组件以展示数据。

创建表格组件

在创建表格组件时，需要在 HTML 模板中使用 mat-table 元素来创建表格，使用 mat-header-row 元素和 mat-row 元素定义表头和数据行，并使用 ngFor 指令遍历数据源中的所有数据并将其展示出来。同时，为了分页展示数据，需要使用 mat-paginator 元素将数据分页。

// www.javascriptcn.com code example
<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>

<!--pagination-->
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

在以上代码中，matColumnDef 定义了每一列所对应的属性名称，mat-header-cell 元素用于定义每一列的表头，mat-cell 元素用于定义每一列的数据行。使用 matHeaderRowDef 元素和 matRowDef 元素来分别定义表头和数据行的属性名，使用 displayedColumns 数组来定义要展示的字段。同时，使用 mat-paginator 元素来定义分页展示数据。

响应用户操作

在表格中，还可以使用一些 Angular Material 提供的指令实现一些交互效果，如 matSort、mat-filter、mat-select 等。以 matSort 指令为例，以下代码演示了如何让用户点击表头时自动按照相应的属性排序：

// www.javascriptcn.com code example
<mat-table [dataSource]="dataSource" matSort>

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

  <!-- more columns -->

  <mat-header-row *matHeaderRowDef="displayedColumns; let headerRow" mat-sort-header disableClear [mat-sort-direction]="headerRow.direction"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

在以上代码中，使用 matSort 指令，将表格数据源排序功能应用到表格上。同时，在表头行中，使用 mat-sort-header 指令，定义点击表头时需要按照哪一列进行排序。并且在表头行中，使用 [mat-sort-direction] 属性来指示当前的排序方向。disableClear 属性用于禁用清空排序。最后，根据之前的绑定定义 matHeaderRowDef 主题行属性。

结语

到此为止，我们已经讲解了如何使用 Angular Material 的表格组件。通过以上的例子，我们不仅学习了 Angular Material 表格组件的基础使用，还学习了如何响应用户操作以及如何进行分页等操作。在实际开发过程中，我们可以根据实际需求进行拓展，写出更加丰富、完整的表格组件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d01627e46428fe9eca8eea

Angular Material 表格组件使用指南

安装与引入

创建表格数据源

创建表格组件

响应用户操作

结语

接着读