ASP.NET Core6+Angular13分页时NgFor绑定对象报错解决及分页实现

报错原因 #

添加分页后，ASP.NET Core API返回的是包含items数组和分页信息的JSON对象，但你把整个返回对象直接赋值给了用于*ngFor遍历的items变量。而*ngFor只能遍历数组这类可迭代对象，所以触发了这个错误。

解决步骤 #

1. 修正组件的数据赋值逻辑

把整个返回对象改成只提取其中的items数组，同时保存分页信息用于后续分页控件展示：

// 组件中的订阅代码
this.erpService.getAll().subscribe(data => {
  this.items = data.items; // 只取数组部分给*ngFor遍历
  this.pagerInfo = data.pager; // 保存分页数据，比如总页数、当前页等
});

2. （可选但推荐）添加类型定义保证类型安全

在Angular项目中定义对应API返回结构的TypeScript接口，避免类型错误：

// 分页结果通用接口
export interface PagedResponse<T> {
  items: T[];
  pager: {
    totalItems: number;
    currentPage: number;
    pageSize: number;
    totalPages: number;
  };
}

// 物品实体接口，根据你的业务属性调整
export interface Item {
  id: number;
  name: string;
  // 其他物品字段...
}

然后在服务的getAll方法中指定返回类型：

// ErpServiceService中的方法
getAll(page: number = 1, pageSize: number = 10): Observable<PagedResponse<Item>> {
  return this.http.get<PagedResponse<Item>>(`/api/items?page=${page}&pageSize=${pageSize}`);
}

3. 实现分页切换功能

在组件中添加分页相关属性和切换方法：

// 组件属性
currentPage: number = 1;
pageSize: number = 10;
pagerInfo: any = {};
items: Item[] = [];

// 切换分页方法
switchPage(pageNum: number) {
  // 边界校验，避免越界
  if (pageNum < 1 || pageNum > this.pagerInfo.totalPages) return;
  
  this.currentPage = pageNum;
  // 请求对应页码的数据
  this.erpService.getAll(pageNum, this.pageSize).subscribe(res => {
    this.items = res.items;
    this.pagerInfo = res.pager;
  });
}

4. 在HTML模板中添加分页控件

在表格下方添加分页按钮，绑定切换方法：

<!-- 物品列表表格 -->
<table>
  <tr *ngFor="let item of items">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <!-- 其他列... -->
  </tr>
</table>

<!-- 分页控件 -->
<div class="pagination-controls">
  <button (click)="switchPage(currentPage - 1)" [disabled]="currentPage === 1">上一页</button>
  <span>第 {{currentPage}} 页 / 共 {{pagerInfo.totalPages}} 页</span>
  <button (click)="switchPage(currentPage + 1)" [disabled]="currentPage === pagerInfo.totalPages">下一页</button>
</div>

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