使用 Angular 进行服务器端排序、分页和过滤时，如何在重置过滤器时停止进行多次调用

Question

所以假设我有一个 table，其中的数据源获取如下

const mapperFunction = ([page, dateRange]) => this.service.getListedEvents(page, dateRange);

combineLatest([this.page$, this.dateRange$])
  .pipe(
    this.retryHelper.loadAndRetryOperator(mapperFunction, this, httpErrorConsumer)
  )
  .subscribe(listedEvents => {
    this.tableData = listedEvents;
  });

然后我有一些功能链接到我的 html 如下

pageChange(event) {
  this.page$.next(event);
}


dateChange(event) {
  this.dateRange$.next(event);
  this.page$.next(1);
}

如果我更改日期，我希望它将页面重置为第 1 页，但意外的结果是 API 调用被启动了两次。首先是设置 dateRange 时，其次是页面重置时

一个可能的解决方案是使用 switchmap，但它仍然会触发两次，并且在第二次发射发生时取消第一次，但这对我来说似乎不正确。

我想我也可以使用去抖动，但这真的是最好的解决方案吗？

Answer 1

一个可能的解决方案是将要更改的所有参数放在一个对象中。这确实有意义，因为它们都是请求的一部分。

pageChange(event) {
  this.requestModel$.next({ 
    ...this.requestModel,
    page: event
  );
}


dateChange(event) {
  this.requestModel$.next({ 
    ...this.requestModel,
    dateRange: event,
    page: 1
  );
}

这样你可以对请求模型进行多次更改，它只会触发一次请求。

使用 Angular 进行服务器端排序、分页和过滤时，如何在重置过滤器时停止进行多次调用

When doing server-side sorting, pagination and filtering with Angular, how can you stop multiple calls from being made when resetting the filters

rxjs

angular