DEV Community
·
Angular Material 表格 - 服务器端过滤
💡
原文英文，约1400词，阅读约需6分钟。
📝
内容提要
本文介绍如何使用 Angular Material 表格组件实现服务器端数据过滤。通过 GitHub API 创建数据源，并结合 MatSort 和 MatPaginator 实现排序和分页。定义 MatTextFilter 指令监听输入变化，实现数据过滤，并将其集成到数据源中，实现完整的过滤功能。
🎯
关键要点
- Angular Material 表格组件用于以表格格式显示数据，支持排序、分页和过滤功能。
- 使用 GitHub API 创建数据源，并实现服务器端数据过滤。
- 通过 MatSort 和 MatPaginator 实现排序和分页功能。
- 定义 MatTextFilter 指令以监听输入变化，实现数据过滤。
- 在表格组件中集成 MatTextFilter 指令以实现完整的过滤功能。
- 创建 TableDataSource 类以封装数据获取和处理逻辑，包括排序、分页和过滤。
- 在表格组件模板中添加输入框以实现过滤功能，并将 MatTextFilterDirective 附加到输入框。
- 在数据源中使用 MatTextFilter 以监听文本过滤器的变化并调用服务器进行数据过滤。
➡️
