Angular中ngx-pagination日期筛选搜索按钮无响应问题排查

错误原因分析 #

报错ERROR TypeError: Cannot read properties of undefined (reading 'filter')直接指向filterDate方法中引用了未定义的this.array变量，但你的实际数据源是allMerchantList（当前展示列表）和dataBk（原始数据备份），属于变量引用错误导致的逻辑中断。

修复步骤及代码实现 #

1. 修正数据源引用并完善筛选逻辑 #

确保始终基于**原始备份数据dataBk**做筛选，避免多次筛选后丢失原始数据，同时替换错误的this.array引用：

组件变量定义（示例）

// 商家数据类型，根据实际接口返回结构调整
interface Merchant {
  id: number;
  name: string;
  createTime: string; // 假设接口返回日期格式为字符串
  // 其他字段...
}

allMerchantList: Merchant[] = []; // 当前用于展示的列表
dataBk: Merchant[] = []; // 存储接口返回的完整原始数据
startDate: Date | undefined;
endDate: Date | undefined;
currentPage = 1;
pageSize = 10;
totalItems = 0;

修正后的filterDate方法

filterDate(): void {
  // 从原始备份数据复制一份，避免修改源数据
  let filteredData = [...this.dataBk];

  // 处理开始日期筛选
  if (this.startDate) {
    const startDateTime = new Date(this.startDate);
    filteredData = filteredData.filter(merchant => {
      const merchantCreateTime = new Date(merchant.createTime);
      return merchantCreateTime >= startDateTime;
    });
  }

  // 处理结束日期筛选（设置为当天23:59:59，避免漏选当天数据）
  if (this.endDate) {
    const endDateTime = new Date(this.endDate);
    endDateTime.setHours(23, 59, 59, 999);
    filteredData = filteredData.filter(merchant => {
      const merchantCreateTime = new Date(merchant.createTime);
      return merchantCreateTime <= endDateTime;
    });
  }

  // 更新展示列表、总条数，并重置分页页码
  this.allMerchantList = filteredData;
  this.totalItems = filteredData.length;
  this.currentPage = 1;
}

2. 确保原始数据备份正确初始化 #

在API请求成功后，将完整的返回数据存入dataBk：

getMerchants(): void {
  // 调用ASP.NET Core API，根据实际服务方法调整参数
  this.merchantService.getMerchants(
    this.startDate,
    this.endDate,
    this.currentPage,
    this.pageSize
  ).subscribe(response => {
    this.allMerchantList = response.merchantList;
    this.dataBk = [...response.merchantList]; // 备份原始数据
    this.totalItems = response.totalCount;
  });
}

3. 模板层绑定校验 #

确保日期选择器和搜索按钮的绑定正确：

<!-- ngx-bootstrap-datepicker 绑定示例 -->
<input type="text"
       class="form-control"
       bsDatepicker
       [(ngModel)]="startDate"
       placeholder="开始日期">

<input type="text"
       class="form-control"
       bsDatepicker
       [(ngModel)]="endDate"
       placeholder="结束日期">

<button class="btn btn-primary" (click)="filterDate()">搜索</button>

<!-- ngx-pagination 绑定示例 -->
<pagination-controls (pageChange)="currentPage = $event"></pagination-controls>
<div *ngFor="let merchant of allMerchantList | paginate: { itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems }">
  <!-- 商家数据展示 -->
</div>

可选优化：后端筛选（大数据场景） #

如果商家数据量较大，建议直接通过API带日期参数做后端筛选，避免前端处理大量数据的性能问题：

filterDate(): void {
  this.currentPage = 1; // 重置页码
  this.getMerchants(); // 直接调用带日期参数的API，由后端返回筛选后的分页数据
}

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