我有一个包含 3 个字段的表单,这些字段作为查询参数放入 API 调用中。当点击按钮时,表单就会被提交,API 就会被调用,数据就会被放入表格中。该表是一个 Angular Material 表,效果很好,但我想用分页表中的数据来“调用”API。因此,我最初的想法是监听表中的事件以了解页面事件的更改,但这被证明具有挑战性,因为它在页面加载时发出。 所以我开始构建它的方法是将按钮发射到主题上,但看起来材料表的角度分页在页面加载时立即发射初始值,并在搜索$主题上使用combineLatest似乎也发射了某些东西或管道仍在运行并调用 API
所以基本上发生的事情是在没有表单数据的情况下调用 API,因为表分页器立即触发
这是一个非常基本的
stackBlitz尝试复制这一点非常基本:
https://material.angular.io/components/table/examples#table-httpstartWith
接线员执行。没有这个管道,它应该按您想要的方式工作。
我会重构一下你的解决方案以使其更干净要处理分页,最好监听
(page)
输出,然后您将能够仅捕获更改而无需初始值。初始分页(页码和大小)可以在您的属性中设置并作为分页的输入传递。
表单验证可以由表单控件验证器本地处理,而不是手动检查。表格组件可以接受普通的项目数组,不需要数据源对象。
您的长度也存在潜在问题。分页器等待您的集合的完整长度(例如,当页面大小为 5 时,它可以是 100,因此分页器确定您有 20 页)。因此,您的 BE 需要返回数据库中存在的项目总数以及您请求的相应页面的项目数量。
这是我的表过滤器/分页处理的重构版本:
https://stackblitz.com/edit/stackblitz-starters-sksrlk?file=src%2Fmain%2Fmain.component.ts