Angular中如何获取GET请求API响应data属性下的courses数组？

• 属性访问语法错误：你使用responseData.key.courses访问属性时，.运算符会把key当做固定的属性名去查找，而返回对象中没有名为key的属性，所以直接抛出对应报错。同时你完全不需要遍历返回对象的所有key来查找data属性，直接访问responseData.data即可，冗余的遍历逻辑可以直接删掉。
• TypeScript类型校验问题：Angular的HttpClient默认返回无类型的Object，TypeScript编译时无法确认返回对象上存在data属性，也会触发类型错误。

另外HttpClient内部已经自动完成了JSON字符串到JS对象的转换，不需要你手动做额外的转换操作。

1. 首先定义和接口返回结构匹配的TS类型，你可以写在组件文件顶部，也可以单独抽离到公共类型文件：

// 如果你已经在./c.model中定义了对应课程的C类型，这里可以直接用C[]代替Course[]
interface ApiResponse {
  status: string;
  numberOFResults: number;
  data: {
    courses: C[]
  }
}

2. 修改fetchCourses方法，给http.get加上泛型指定返回类型，直接提取data.courses即可：

private fetchCourses() {
  this.http.get<ApiResponse>('http://127.0.0.1:3000/api/courses/')
  .pipe(map(responseData => responseData.data.courses))
  .subscribe(responsec => {
    this.courses = responsec;
  })
}

如果你坚持要保留原来遍历key的写法，只需要把属性访问的点语法换成方括号语法即可：

// 仅为兼容原有写法的修改，不推荐使用
if(key === "data")
{
  coursesArray.push(...(responseData[key].courses))
}

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