Angular 15分页搜索问题：筛选仅对当前页生效如何解决？

问题根源 #

当前的onAuditSearch方法是在前端本地过滤已加载的当前页数据，但服务端分页模式下，前端仅持有当前页的数据集，切换页面时会重新从后端拉取未过滤的分页数据，导致筛选效果仅在当前页有效，切换页面后失效。

正确的解决方案是：将搜索参数传递给后端，由后端完成全局数据筛选后返回符合条件的分页结果。

具体修改步骤 #

1. 修正搜索方法逻辑

不再在前端本地过滤数据，而是将搜索关键词传递给后端，重新拉取筛选后的分页数据：

onAuditSearch() {
  this.searchQuery = this.selectedName.trim();
  this.currentPage = 1; // 搜索后默认回到第一页
  this.loadAllAudits();
}

2. 修正服务端接口的返回类型与参数默认值

原服务代码中返回类型错误（JSON响应是单个IAuditList对象，而非数组），同时给分页参数设置默认值避免空参数：

getAllAuditsPagination(searchQuery?: string, pageNumber?: number, pageSize?: number): Observable<IAuditList> {
  let params = new HttpParams()
    .set('searchQuery', searchQuery?.toString() ?? '')
    .set('pageNumber', pageNumber?.toString() ?? '1')
    .set('pageSize', pageSize?.toString() ?? '10');
  return this.http.get<IAuditList>(this.baseUrl + '/users/all-audits', { params: params });
}

3. 优化组件数据加载逻辑（可选）

给loadAllAudits加上加载状态与错误处理，提升用户体验：

loadAllAudits() {
  this.isLoading = true;
  this.auditService.getAllAuditsPagination(this.searchQuery, this.currentPage, this.pageSize).subscribe({
    next: (res: IAuditList) => {
      this.allAuditList = res.data.pageItems;
      this.totalRecords = res.data.totalRecord;
      this.currentPage = res.data.currentPage;
      this.pageSize = res.data.pageSize;
      this.isLoading = false;
    },
    error: () => {
      this.isLoading = false;
      // 可添加错误提示逻辑，比如弹窗提示加载失败
    }
  })
}

4. 实时搜索防抖优化（可选）

如果需要实时搜索，建议添加防抖逻辑减少后端请求次数：

• 先导入RxJS操作符：

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

• 在组件中定义搜索主题并订阅：

private searchSubject = new Subject<string>();

ngOnInit(): void {
  this.searchSubject.pipe(
    debounceTime(300), // 300ms内连续输入仅触发一次请求
    distinctUntilChanged() // 仅当搜索词变化时触发
  ).subscribe(query => {
    this.searchQuery = query;
    this.currentPage = 1;
    this.loadAllAudits();
  });
}

• 修改搜索方法：

onAuditSearch() {
  this.searchSubject.next(this.selectedName.trim());
}

关键注意事项 #

• 确保后端接口已实现接收searchQuery参数，并基于所有数据完成全局筛选，同时返回筛选后的总记录数（totalRecord），这样分页控件才能正确计算总页数。
• 搜索后重置当前页为1，符合用户搜索后查看第一页结果的习惯。

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