Angular14中ngx-pagination分页大小切换失效及参数空格问题排查

问题原因 #

核心问题是请求传递的pageSize参数带有前导空格：ASP.NET Core对数值类型（比如int类型的PageSize参数）的模型绑定校验严格，带空格的字符串无法被解析为合法整数，因此返回400参数无效错误。前端因为没有收到正确响应，导致分页组件的页码和每页条数无法更新。

解决方案 #

前端处理（从源头消除空格） #

在Angular下拉选择组件中，确保选中的pageSize值去除首尾空格后再发送请求：

• 模板驱动表单场景：

  <select [(ngModel)]="pageSize" (change)="handlePageSizeChange()">
    <option value="10">10条/页</option>
    <option value="20">20条/页</option>
    <option value="50">50条/页</option>
    <option value="100">100条/页</option>
  </select>
  

  组件方法中处理：

  handlePageSizeChange() {
    this.pageSize = this.pageSize.trim();
    this.loadPagedData(); // 调用分页请求方法
  }
  

• 响应式表单场景：

  this.paginationForm.get('pageSize')?.valueChanges.subscribe(rawValue => {
    const cleanSize = rawValue.trim();
    this.paginationForm.get('pageSize')?.setValue(cleanSize, { emitEvent: false });
    this.loadPagedData(1, parseInt(cleanSize));
  });
  

后端处理（兼容带空格的参数） #

如果需要后端兼容这类参数，可以通过手动处理或自定义绑定实现：

• 单个接口手动处理：

  [HttpGet]
  public IActionResult GetPagedData([FromQuery] string pageSize, [FromQuery] int pageIndex)
  {
      int validPageSize = 10; // 默认值
      if (!string.IsNullOrWhiteSpace(pageSize))
      {
          int.TryParse(pageSize.Trim(), out validPageSize);
      }
      // 执行分页查询逻辑
  }
  

• 全局自定义模型绑定（适合多接口场景）：创建针对整数类型的绑定器，自动去除参数首尾空格后再解析。

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