介绍
Ionic 是一个开源的跨平台移动应用程序开发框架，它允许开发人员使用 Web 技术（HTML、CSS 和 JavaScript）来构建应用程序。Ionic 4 是 Ionic 的最新版本，它使用了 Angular 6 和 TypeScript 2.9，并提供了一个完整的组件库，其中包括了 Material Design 风格的组件。
Material Design 是由 Google 设计的一种现代化的设计语言，它被广泛应用于移动应用程序和 Web 应用程序的设计中。在 Ionic 4 中，我们可以很容易地使用 Material Design 表格来展示数据。
在本文中，我们将介绍如何在 Ionic 4 中使用 Material Design 表格。我们将讨论如何安装和导入所需的组件，如何创建一个简单的表格，并如何使用一些常见的功能，如分页和排序。
安装
在使用 Material Design 表格之前，我们需要先安装必要的依赖项。我们需要安装 @angular/material 和 @angular/cdk。我们可以使用以下命令来安装它们：
npm install @angular/material @angular/cdk --save
我们还需要在 app.module.ts 文件中导入所需的模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- ------------------------------
------ - ------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
---------------
-------------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- --在上面的代码中，我们导入了 MatTableModule、MatPaginatorModule 和 MatSortModule 模块，这些模块提供了我们在表格中使用的一些功能。
创建一个简单的表格
我们来创建一个简单的表格，它将显示一些假数据。我们将使用 MatTableDataSource 来管理我们的数据，并将其传递给 MatTable 组件来显示。
首先，我们需要定义我们的数据模型。我们将创建一个 Person 类，它将包含我们的数据项：
export interface Person {
name: string;
age: number;
city: string;
}接下来，我们将创建一个 AppComponent，它将包含我们的表格。我们将在 AppComponent 的构造函数中定义我们的数据，并将其传递给 MatTableDataSource：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- --------------------------
------ - ------ - ---- -----------
------------
--------- -----------
--------- -
---- -------------------------
------ --------- ------------------------- --------
------------- --------------------
--- --------------- ----------------- -------------------------
--- -------- ---------------- ---------- ----------- -------
---------------
------------- -------------------
--- --------------- ----------------- ------------------------
--- -------- ---------------- ---------- ---------- -------
---------------
------------- --------------------
--- --------------- ----------------- -------------------------
--- -------- ---------------- ---------- ----------- -------
---------------
--- -------------- -----------------------------------------
--- ------- --------------- ---- -------- ------------------------
--------
-------------- ---------------------- --- --- ----------------------
------
--
------- -
-
----- -
------ -----
-
-
-
--
------ ----- ------------ -
----------------- -------- - -------- ------ --------
----------- ---------------------------
------------- -
----- ------- -------- - -
- ----- -------- ---- --- ----- ---- ----- --
- ----- ------ ---- --- ----- ---- -------- --
- ----- ---------- ---- --- ----- --------- -
--
--------------- - --- ---------------------------
-
-在上面的代码中，我们定义了一个 displayedColumns 数组，它包含我们要显示的列的名称。我们还定义了一个 dataSource，它包含我们的数据。我们使用 MatTableDataSource 来管理数据，并将其传递给 MatTable 组件。
我们在模板中使用 mat-table 元素来创建我们的表格。在 mat-table 元素中，我们使用 dataSource 属性来指定我们的数据源。我们还使用 matSort 指令启用排序功能。
接下来，我们使用 ng-container 元素来定义我们的列。我们使用 matColumnDef 属性来指定列的名称，并使用 mat-header-cell 和 mat-cell 元素来定义表头单元格和数据单元格。我们使用 matHeaderCellDef 和 matCellDef 指令来指定单元格中要显示的内容。
在最后一行代码中，我们使用 matHeaderRowDef 和 matRowDef 指令来定义表头行和数据行。
最后，我们在模板中使用 mat-paginator 元素来创建一个分页器。我们使用 pageSizeOptions 属性来指定可用的页面大小选项。
分页和排序
我们已经创建了一个简单的表格，现在让我们看看如何使用分页和排序功能。我们已经在上面的代码中启用了排序功能，现在我们将添加一个分页器。
我们在 AppComponent 中添加一个 @ViewChild，它将引用我们的分页器。我们还添加了一个 ngAfterViewInit 生命周期钩子，它将在视图初始化后调用：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------ - ---- --------------------------
------ - ------------ - ---- ------------------------------
------ - ------ - ---- -----------
------------
--------- -----------
--------- -
---- -------------------------
------ --------- ------------------------- --------
---
--------
-------------- ---------------------- --- --- ----------------------
------
--
------- -
-
----- -
------ -----
-
-
-
--
------ ----- ------------ -
----------------- -------- - -------- ------ --------
----------- ---------------------------
------------------------ ---------- -------------
------------- -
---
-
----------------- -
------------------------- - ---------------
-
-在上面的代码中，我们添加了一个 @ViewChild，它将引用我们的 MatPaginator。在 ngAfterViewInit 生命周期钩子中，我们将分页器分配给我们的数据源。
我们已经启用了排序和分页功能，现在我们可以在表格中使用它们。我们只需要在列定义中添加 mat-sort-header 和 mat-paginator 指令即可。
结论
在本文中，我们介绍了如何在 Ionic 4 中使用 Material Design 表格。我们讨论了如何安装和导入所需的组件，如何创建一个简单的表格，并如何使用一些常见的功能，如分页和排序。我们希望这篇文章对您有所帮助，并帮助您更好地了解 Ionic 4 和 Material Design。如果您有任何疑问或建议，请随时在评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67568c90d8a608cf5d8ce5d7