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

Question

假设我有一个表，其中的数据源按如下方式获取

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
  );
}

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