Angular-数据源的可观察对象或主题

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值之前加载了视图/网格。我考虑过通过实现Observable / subscribe解决此问题。

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

let gridData = responseStudents.Students.map(item => new ResponseStudents());

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，可以完成您正在寻找的基础。通过组件文件完成分页更新时，实际上刷新了表存在一些问题，因此我选择更改dataSource。

您基本上应该能够采用changePageArray()方法中所示的代码并针对您的用例实现。在需要的地方添加逻辑，如果不传播到ui，则可能刷新changeDetection。

希望这就是您想要的，编码愉快！