Angular 12 使用map(res => res["data"])获取数据库数据报错如何解决

这个报错是TypeScript的类型校验触发的：HttpClient默认返回的响应体类型为Object，TS无法确认该类型上存在data属性，所以抛出索引异常。
你可以选择以下任意一种方案解决：

方案1（规范写法，推荐） #

给http.get添加泛型声明，明确告知TS返回的响应结构，同时修正方法返回类型：
修改employee.service.ts里的getEmployeesList方法如下：

// 先明确返回值类型为Employee数组可观察对象
getEmployeesList(employee: Employee): Observable<Employee[]> {
  // 给http.get指定泛型，说明返回的对象包含data字段，且data是Employee数组
  return this.http.get<{data: Employee[]}>(`${this.baseUrl}?operation=` + employee.operation)
    .pipe(map((res) => res.data))
}

这个方案可以保留TS的类型校验能力，后续开发也会有代码提示。

方案2（快速修复） #

如果你暂时不想做严格的类型定义，可以直接把响应对象断言为any类型跳过校验：

getEmployeesList(employee: Employee): Observable<any> {
  return this.http.get(`${this.baseUrl}?operation=` + employee.operation)
    .pipe(map((res: any) => res['data']))
}

修改完成后重新编译项目，就能正常读取接口返回的data字段里的员工列表，渲染到页面上了。

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