在开发中，我们往往需要在界面上呈现大量的数据信息，这时数据筛选就尤为重要。Angular Material 表格是 Angular 8 中常用的组件之一，它提供了一系列的功能，包括用于筛选数据的功能。本文将详细介绍如何在 Angular Material 表格中实现数据筛选，帮助读者更好地掌握 Angular 8 中 Angular Material 表格组件的使用。
前置条件
在开始学习如何在 Angular Material 表格中实现数据筛选之前，需要先掌握以下技能：
- Angular 8 的基础知识：包括了解 Angular 8 中组件和模块的基本概念，以及掌握 Angular 8 的基础语法和框架特性等。
- Angular Material 的基本使用：包括安装 Angular Material 所需的组件、配置 CSS 样式、引入主题风格等。
实现步骤
步骤一：引入 MatTableDataSource
在 Angular Material 表格中实现数据筛选，需要用到 MatTableDataSource。MatTableDataSource 是一个可观察的类，可以方便地将数据集合绑定到表格上。因此，我们需要先引入 MatTableDataSource。
------ - ------------------ - ---- --------------------
步骤二：优化数据源
在 Angular Material 表格中，如何让用户在搜索框中输入关键字，根据输入的关键字来筛选数据。针对这个场景，我们可以使用 MatTableDataSource 的一个关键属性：filter。
在 MatTabDataSource 中，filter 是一个函数，用于过滤数据。因此，在使用 MatTableDataSource 时，需要对数据源进行优化，变成一个数组，并把它赋值给 MatTableDataSource。
------ ----- -------------- -
----------------- -------- - ------------ ------- --------- ----------
---------- - --- ------------------------------------------
------------------------ ------- -
---------------------- - ---------------------------------
-
-本示例中，ELEMENT_DATA 是一个 Element 类型的数组，存储了表格中的数据。注意，在 applyFilter 方法中，我们使用 filter 变量给数据源赋值，实现了筛选功能。
步骤三：实现模板
接下来，我们需要在模板中添加一个搜索框，用于输入筛选关键字，并添加一个按钮，用于激活筛选操作。具体实现如下：
---------------- ------ -------- ------------------------------------------ --------------------- ----------------- ------- ---------- ---------------------------------------- ------ --------- -------------------------- -- --- -------- --- --------
在本示例中，我们使用 mat-form-field、matInput 和 mat-button 分别实现输入框、按钮的样式，通过 (keyup) 事件实现了实时搜索功能。同时，在上面例子中，我们还为状体行添加了一个名为 Clear 的按钮，用于清空搜索框中的内容。
总结
通过本文的学习，我们了解了 Angular 8 中如何在 Angular Material 表格中实现数据筛选。Angular Material 提供了丰富的组件和功能，可以让开发者快速地搭建出高质量的前端应用。同时，Angular Material 中的 MatTableDataSource 组件结合使用，可以大大提升表格的交互性。如果同学们还在使用 jQuery 等老旧的前端 UI 库，相信本文的内容可以给大家带来新的启示和思路。
附上示例代码：https://stackblitz.com/edit/angular-material-table-filter
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b9e234add4f0e0ff26cc5b