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 值之前加载了视图/网格，因为 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。

希望这就是您正在寻找的，快乐的编码！