Angular13向ASP.NET Core Web API传页码及分页问题排查

问题1：Angular 13组件HTML向Web API传递页码 #

你当前的代码已实现基础的页码传递逻辑，但存在细节问题：

• 组件中retrieveAllItems方法默认参数为pageNumber: number = 0，但Web API的GetAll方法接收的页码是从1开始的（从返回的Pager数据currentPage:1可看出），初始调用传递0会导致后端分页逻辑异常。
• 修正步骤：
  1. 将retrieveAllItems的默认参数改为1：

     retrieveAllItems(pageNumber: number = 1): void { ... }
     

  2. 服务层getAll方法通过HttpParams追加pageNumber的逻辑正确，后端会自动绑定query string参数，无需修改。
  3. HTML中pagination-controls的(pageChange)事件已正确绑定onPageChanged方法，能将选中页码传递给API，这部分逻辑无问题。

问题2：ngxPagination仅显示上下页，不显示具体页码 #

核心原因是分页管道参数配置错误：

• 你在paginate管道中设置itemsPerPage: pager?.numberOfPages，但numberOfPages是总页数，而itemsPerPage需要的是每页显示的条目数量，参数混淆导致控件无法正确计算页码数量。
• 修正步骤：
  1. 若使用固定每页条数（比如10），修改分页管道配置：

     <tr
       *ngFor="
         let item of items
           | paginate
             : {
                 itemsPerPage: 10,
                 currentPage: pager?.currentPage,
                 totalItems: pager?.totalRecords
               }
       "
     >
     

  2. 若需从后端获取每页条数，修改后端Pager模型新增PageSize属性并赋值，同步更新Angular的Pager接口：

     // 后端Pager模型
     public class Pager
     {
         public int NumberOfPages { get; set; }
         public int CurrentPage { get; set; }
         public int TotalRecords { get; set; }
         public int PageSize { get; set; } // 新增
     }
     

     // Angular Pager接口
     export interface Pager {
         numberOfPages:number;
         currentPage:number;
         totalRecords:number;
         pageSize:number; // 新增
     }
     

     再修改管道配置：

     itemsPerPage: pager?.pageSize
     

  3. 确保totalItems为正确的总记录数，当总记录数大于每页条数时，分页控件会自动显示具体页码；[responsive]="true"仅在小屏幕隐藏部分页码，桌面端正常显示。

问题3：items集合出现“optional (property) ItemsComponent.items?: ItemsData[] | undefined”错误 #

原因是items被声明为可选类型（?:），Angular模板无法确定其是否已初始化，导致类型错误：

• 修正步骤：
  1. 在组件中初始化items为空数组，替代可选类型声明：

     items: ItemsData[] = []; // 替换原有的items?:ItemsData[];
     

  2. 或在模板中添加空值保护，确保*ngFor遍历的是数组：

     <tr
       *ngFor="
         let item of (items || [])
           | paginate
             : {
                 itemsPerPage: 10,
                 currentPage: pager?.currentPage,
                 totalItems: pager?.totalRecords
               }
       "
     >
     

  3. 也可使用*ngIf="items"包裹表格，确保数据加载完成后再渲染：

     <table id="customers" *ngIf="items">
       <!-- 表格内容 -->
     </table>
     

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