Angular中用switchMap优化mat-table搜索请求遇类型错误问题

问题场景 #

在Angular项目中使用Angular Material的mat-table组件结合分页功能，实现了搜索框输入时向后端发送搜索文本、分页大小和页码的过滤逻辑。已通过debounceTime设置延迟避免用户每输入一个字符就发起请求，现在想通过switchMap取消之前的请求，仅保留最后一次请求，但修改代码后出现类型错误：loadData方法返回void，无法赋值给switchMap所需的ObservableInput类型。

错误提示（翻译后） #

(method) ListTableComponent.loadData(busca: string | undefined, limite: number, pagina: number): void
类型'void'不能赋值给类型'ObservableInput'。ts(2322)
switchMap.d.ts(2, 79): 预期类型来自此签名的返回类型。
list-table.component.ts(94, 17): 是否想将此函数标记为'async'？

原代码片段 #

原applyFilter方法 #

_search$: Subject<string> = new Subject<string>();
search = '';

applyFilter(search: string) {
  this._search$.next(search.toLocaleLowerCase());
  this._search$.pipe(
    debounceTime(GlobalVariables.DEBOUNCETIME),
  )
    .subscribe((data: string) => {
      this.currentPage = 0;
      this.loadData(data, this.pageSize, this.currentPage);
    });
}

原loadData方法 #

loadData(search: string = '', limite: number, pagina: number) {
  if (search === 'sim') {
    search= 'true';
  } else if (search === 'nao' || search === 'não') {
    search= 'false';
  }
  this.service.listartecnicosPaginacao(search, limite, pagina).subscribe((res: any) => {
    this.dataSource.data = res['lista'];
    setTimeout(() => {
      this.paginator.pageIndex = this.currentPage;
      this.paginator.length = res.totalElemento;
    });
  });
}

修改后报错的applyFilter方法 #

applyFilter(search: string) {
  this._search$.next(search.toLocaleLowerCase());
  this.currentPage = 0;

  this._search$.pipe(
    debounceTime(VariaveisGlobais.DEBOUNCETIME),
    switchMap(data => this.loadData(data, this.pageSize, this.currentPage))
  )
    .subscribe();
}

解决方案 #

核心问题是switchMap要求传入的映射函数必须返回Observable类型，但原loadData直接在内部订阅了服务的Observable，返回值为void，不符合要求。需要调整逻辑，让loadData返回Observable，统一在switchMap之后处理订阅和数据更新。

步骤1：修改loadData方法，返回Observable #

移除内部的subscribe，改为返回服务调用的Observable，同时保留搜索文本转换逻辑：

loadData(search: string = '', limite: number, pagina: number): Observable<any> {
  // 处理搜索文本的转换
  if (search === 'sim') {
    search = 'true';
  } else if (search === 'nao' || search === 'não') {
    search = 'false';
  }
  // 返回服务的Observable，不在此方法内订阅
  return this.service.listartecnicosPaginacao(search, limite, pagina);
}

步骤2：调整订阅逻辑，避免重复订阅 #

将_search$的订阅逻辑移到组件初始化钩子ngOnInit中，避免每次调用applyFilter都创建新订阅，同时在switchMap中处理页码重置，最后统一订阅处理数据更新：

// 组件类中声明
_search$: Subject<string> = new Subject<string>();
search = '';
private destroy$ = new Subject<void>(); // 用于组件销毁时取消订阅

ngOnInit(): void {
  this._search$.pipe(
    debounceTime(VariaveisGlobais.DEBOUNCETIME),
    switchMap(data => {
      this.currentPage = 0; // 搜索时重置页码为第一页
      return this.loadData(data, this.pageSize, this.currentPage);
    }),
    takeUntil(this.destroy$) // 防止内存泄漏
  ).subscribe((res: any) => {
    // 更新表格数据源和分页信息
    this.dataSource.data = res['lista'];
    setTimeout(() => {
      this.paginator.pageIndex = this.currentPage;
      this.paginator.length = res.totalElemento;
    });
  });
}

// applyFilter仅负责发送搜索关键词
applyFilter(search: string) {
  this._search$.next(search.toLocaleLowerCase());
}

// 组件销毁时清理订阅
ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

说明 #

• switchMap会自动取消之前未完成的Observable请求，确保只有最后一次搜索的请求生效
• takeUntil配合destroy$可以在组件销毁时取消所有订阅，避免内存泄漏
• 把数据更新逻辑统一放到最终的subscribe中，保持代码逻辑的集中性

内容的提问来源于stack exchange，提问作者Hugo Leonardo