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

从本质上讲，您应该能够使用studentId方法中显示的代码，并已为您的用例实现。在需要的地方添加逻辑，如果不传播到ui，则可以刷新changeDetection。

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

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

1 个答案: