Angular 13请求REST API获取results对象数据报错如何解决

服务层定义的HTTP响应泛型和接口实际返回结构不匹配：你当前代码默认接口直接返回IVersionDetails类型的数组，但实际接口返回的是带外层包装的对象，目标版本数组存放在返回对象的results属性下，类型不匹配会直接导致TS报错、数据读取失败。

按以下顺序修改代码即可：

• 1. 补全匹配实际返回结构的TS类型定义

// 对应results数组内的单条版本数据结构，字段按接口实际返回值补充
interface IVersionItem {
  id: number;
  version: string;
  // 其余接口返回的业务字段自行补充
}

// 对应接口整体返回的外层结构
interface IVersionApiRes {
  code: number;
  message: string;
  results: IVersionItem[]; // 目标数组存放在该字段
}

• 2. 修改服务层请求方法的泛型定义

// 替换原来错误的数组泛型，使用外层响应结构作为泛型
fetchVersionValue(): Observable<IVersionApiRes> {
  return this.http.get<IVersionApiRes>(
    `${this.PHP_API_SERVER}/api/get/versions`
  );
}

• 3. 组件订阅时读取results字段下的目标数据

this.commonService.fetchVersionValue().subscribe((res) => {
  // 直接从响应对象的results属性拿到目标数组
  const versionList = res.results;
  console.log(versionList);
  // 后续业务逻辑直接操作versionList即可
});

如果修改完数据读取逻辑仍有网络类报错，不属于前端数据提取问题，请排查PHP服务端配置：

• 确认接口已配置正确的CORS跨域响应头
• 确认接口允许GET请求，和前端请求方法一致
• 确认接口路径无拼写错误，服务端路由已正常注册

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