Angular 13如何从JSON响应中获取分页器(pager)详情

问题根源在于你的DataWrapper接口未定义pager属性，导致TypeScript无法识别响应中的该字段。以下是具体解决步骤：

1. 对齐接口与后端JSON结构 #

首先确保你的TypeScript接口完全匹配后端返回的JSON结构。假设后端返回的响应格式如下：

{
  "items": [...],
  "pager": {
    "numberOfPages": 5,
    "currentPage": 1,
    "totalRecords": 42
  }
}

你需要补充定义Pager子接口，并在DataWrapper中添加pager属性：

// 定义Pager子接口，匹配pager对象的字段
export interface Pager {
  numberOfPages: number;
  currentPage: number;
  totalRecords: number;
}

// 修正DataWrapper接口，加入pager属性
export interface DataWrapper<T> {
  items: T[];
  pager: Pager;
}

2. 确保HTTP请求的类型声明正确 #

在发送HTTP请求时，明确指定响应类型为修正后的DataWrapper，这样TypeScript会自动推断字段类型：

import { DataWrapper, Pager } from './your-interfaces-file';

// 替换YourItemType为你实际的items元素类型
this.http.get<DataWrapper<YourItemType>>('your-api-url').subscribe(data => {
  // 现在可以正常访问pager下的字段
  const totalPages = data.pager.numberOfPages;
  const currentPage = data.pager.currentPage;
  const totalRecords = data.pager.totalRecords;
  const items = data.items;
  
  // 你的业务逻辑代码
});

3. 处理字段名不匹配的情况 #

如果后端返回的pager字段名与你定义的不一致（比如后端用pageInfo而非pager），可以通过两种方式处理：

• 方式一：使用字段别名（需借助json2typescript等工具）：

  import { JsonProperty } from 'json2typescript';
  
  export interface DataWrapper<T> {
    items: T[];
    @JsonProperty('pageInfo')
    pager: Pager;
  }
  

• 方式二：手动映射数据：

  this.http.get('your-api-url').subscribe((rawData: any) => {
    // 手动将后端字段映射到Pager类型
    const pager: Pager = {
      numberOfPages: rawData.pageInfo.numberOfPages,
      currentPage: rawData.pageInfo.currentPage,
      totalRecords: rawData.pageInfo.totalRecords
    };
    const items = rawData.items;
    
    // 后续逻辑
  });
  

4. 调试验证响应结构 #

如果仍有问题，先打印原始响应确认结构是否符合预期：

this.http.get('your-api-url').subscribe(rawData => {
  console.log('原始响应数据:', rawData);
  // 检查rawData中是否存在pager字段，以及字段名、嵌套结构是否正确
});

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