如何在Angular/TypeScript中获取API响应data节点内的List数组？

当然可以，你只需要先定义一个匹配API返回结构的泛型响应类型，再通过RxJS的map操作符提取data节点的内容即可，同时完全保留类型安全。

步骤1：定义通用API响应接口 #

先创建一个通用接口来匹配API的返回结构，后续其他接口也能直接复用：

// 通用API响应结构，可根据实际需求添加分页等元信息字段
interface ApiResponse<T> {
  data: T;
  // 可选：如果有分页相关字段可以在这里补充
  // total?: number;
  // currentPage?: number;
  // pageSize?: number;
}

步骤2：修改请求方法 #

调整HttpClient.get()的泛型为ApiResponse<List[]>，然后用map操作符从响应中提取data数组，最终返回的Observable类型依然是List[]：

getLists(): Observable<List[]> {
  return this._httpClient.get<ApiResponse<List[]>>('http://localhost/api/v1/lists').pipe(
    map(response => response.data), // 提取嵌套在data里的List数组
    tap(lists => this._lists.next(lists))
  );
}

为什么原来的代码不行？ #

你之前把get()的泛型设为List[]，但实际API返回的是一个包含data属性的对象，不是直接的数组。TypeScript会按照你声明的泛型推断响应类型，此时response会被当成List[]类型，自然无法访问response.data。

通过上面的修改，既保留了泛型带来的类型校验，又正确获取到了目标数据，同时通用的ApiResponse接口还能适配其他带元信息的API请求场景。

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