Angular Material 核心控件 (2)

继续上一篇文章，我们继续介绍三个常用的重要控件：表格、分页和卡片。

表格

表格控件能够以行和列的方式，可视化地展示大量数据。并且，也支持排序和分页功能。

在使用表格控件时，需要导入 MatTableModule 模块：

import { MatTable } from "@angular/material/table”;

在 src/app/tables/tables.component.html 文件中，添加下列控件：

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

  <!-- 编号列 —>
  <ng-container matColumnDef=“position”>
    <th mat-header-cell *matHeaderCellDef> 编号 </th>
    <td mat-cell *matCellDef="let book"> {{book.position}} </td>
  </ng-container>

  <!-- 书名列 —>
  <ng-container matColumnDef=“name”>
    <th mat-header-cell *matHeaderCellDef> 书名 </th>
    <td mat-cell *matCellDef="let book"> {{book.name}} </td>
  </ng-container>

  <!-- 出版社列 —>
  <ng-container matColumnDef=“publisher”>
    <th mat-header-cell *matHeaderCellDef> 出版社 </th>
    <td mat-cell *matCellDef="let book"> {{book.publisher}} </td>
  </ng-container>

  <!-- 价格列 —>
  <ng-container matColumnDef=“price”>
    <th mat-header-cell *matHeaderCellDef> 价格 </th>
    <td mat-cell *matCellDef="let book"> {{book.price}} </td>
  </ng-container>

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

首先，使用 mat-table 指令的 dataSource 属性 定义了要在表格中显示的数据，数据类型可以是数组，也可以是可观察的流数据 (observable stream)。

然后，使用 matColumnDef 指令定义了四个列模板。在模板中，指定列的名称，标题名和要显示的单元格数据。

最后，使用 mat-header-row 指令和 mat-row 指令定义了行模板，描述了如何渲染标题和数据行的内容。

页面显示效果：

数据表格

分页

在检索大量数据时，考虑到性能原因，我们不会一次性检索全部数据，而是分页进行展示。这时，就可以使用分页控件。

在使用分页控件时，需要导入 MatPaginatorModule 模块：

import { MatPaginatorModule } from "@angular/material/paginator”;

在 src/app/paginators/paginators.component.html 文件中，添加下列控件：

<mat-paginator [length]=“length”
               [pageSize]=“pageSize”
               [pageSizeOptions]=“pageSizeOptions”
               (page)="pageEvent = $event”
               aria-label="选择分页”>
</mat-paginator>

每个分页控件需要指定每页要展示的条目数量（默认值 50）和全部条目数。当前显示第几页，可以使用 pageIndex 指定，默认显示第一页（pageIndex=0）。

页面尺寸选项 pageSizeOptions 可以显示一个下拉框，用户可以选择每页显示的条目数量。

页面显示效果：

分页控件

卡片

卡片可以看作是内容的一个容器，组合使用文字，照片和按钮等表达一个主题。

Angular Material 提供了很多预设的功能区域， 开发人员可以直接在卡片组件中使用：

| 指令 | 描述 |
| --- | — |
| <mat-card-title> | 卡片标题 |
| <mat-card-subtitle> | 卡片子标题 |
| <mat-card-content> | 卡片的主要内容 |
| <img mat-card-image> | 卡片图片 |
| <mat-card-actions> | 操作按钮容器 |
| <mat-card-footer> | 卡片底角 |

在使用卡片控件时，需要导入 MatCardModule 模块：

import { MatCardModule } from "@angular/material/card”;

在 src/app/cards/cards.component.html 文件中，添加下列控件：

<mat-card class="example-card”>
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>三体</mat-card-title>
    <mat-card-subtitle>刘慈欣 著/2019-07-01</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="http://www.lowtea.vip/wp-content/uploads/2022/05/三体封面1.png" alt="三体封面”>
  <mat-card-content>
    <p>
      慈欣基于科学事实，用大胆的想象和严谨的推断，在三体星系行星中构建了一个外星文明形态，并描绘了该文明不可捉摸的数百次的毁灭和重生。
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>喜欢</button>
    <button mat-button>分享</button>
  </mat-card-actions>
</mat-card>

页面显示效果：

卡片控件