继续上一篇文章，我们继续介绍三个常用的重要控件：表格、分页和卡片。
表格
表格控件能够以行和列的方式，可视化地展示大量数据。并且，也支持排序和分页功能。
在使用表格控件时，需要导入 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>
页面显示效果：
