Angular - 数据源的 Observable 或 Subject答案

【问题标题】：Angular - Observable or Subject for DataSourceAngular - 数据源的 Observable 或 Subject
【发布时间】：2020-05-22 12:21:19
【问题描述】：

我有一个使用 Mat Tables 从 API 检索数据的 Angular 7 应用程序。我已经分配了动态分页值，也就是说，每当我根据某个下拉值加载网格时，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());

【问题讨论】：

您是否使用MatTableDataSource 将数据绑定到mat-table？您能否添加将 API 调用结果分配给 mat-table 数据的代码？也可以请您添加mat-table的模板代码吗？
@ysf - 我在第二行添加了代码。 API 需要一些时间来返回数据，但在 UI 中加载分页器值之前。
如果 iamaword 的回答不能解决您的问题，我需要查看整个组件和模板代码。您需要确保按照 iamaword 所述将分页器分配给新数据源。如果它没有解决你的问题，那么它一定是别的东西，可能与你的逻辑有关。从您上面共享的代码片段中无法猜测。同样，请不要犹豫，分享您的整个组件和模板代码。

标签： angular typescript angular-material

【解决方案1】：

我得到了一个StackBlitz，它可以为您所寻找的东西奠定基础。当涉及到通过组件文件完成的分页更新时，实际刷新表最终会出现一些问题，所以我选择更改数据源。

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

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

【讨论】：

就我而言，它没有按预期工作。仍然根据先前的计数加载网格。
是的，在我明确修改 paginator.pageSize 的输入之前，我一直得到类似的结果： this.paginator.pageSize = this.pageSizeOptions[0];不知道为什么会这样，本质上是一些跟踪和错误编码的结果