Angular - DataSource 的 Observable 或 Subject

Question

我有一个 Angular 7 应用程序，其中包含 Mat Tables 从 API 检索数据。我已经分配了动态分页值，即每当我基于某个下拉值加载网格时 pageSizeOptions 值都会发生变化，默认情况下所有记录都会显示。

如果 API 返回 23 条记录，那么 pageSizeOptions 将有 10,20,23,30,40,50，默认情况下它会显示所有 23 条记录。下次我更改下拉值时，API 返回 45 条记录，但这次我的网格仍然只显示 23 条记录，尽管 pageSizeOptions 有 10、20、30、40、45、50 并且选择显示 45 条。

我认为这是由于在分配 pageSizeOptions 值之前加载了 View /网格，因为 API 需要一些时间来返回数据。我想通过实现 Observable/subscribe 来解决这个问题。

我不确定如何为 pageSizeOptions 实现这些。有人可以帮我解决这个问题吗？

let gridData = responseStudents.Students.map(item => new ResponseStudents());
this.myDataSource = new MatTableDataSource(gridData);
this.Count = gridData.length;
this.PageSizeOptions = [this.Count, 5, 10, 25, 100, 500];
//To remove duplicate
this.PageSizeOptions = Array.from(this.PageSizeOptions.reduce((m, t) => m.set(t, t), new Map()).values());

Answer 1

我能够得到 StackBlitz这可能会完成你正在寻找的基础。当涉及到通过组件文件完成的分页更新时，实际刷新表格最终会出现一些问题，所以我选择更改数据源。

您基本上应该能够获取 changePageArray() 方法中显示的代码并为您的用例实现。在需要的地方添加逻辑，如果它没有传播到 ui，可能会刷新 changeDetection。

希望这就是您要找的东西，编码愉快!