无法使用 map(res => res["data"]) Angular 12 从数据库中获取数据答案

【问题标题】：Can't get data from the database using map(res => res["data"]) Angular 12无法使用 map(res => res["data"]) Angular 12 从数据库中获取数据
【发布时间】：2021-09-14 15:06:31
【问题描述】：

我正在使用带有 xampp 的 Angular 12 来访问我的 phpmyadmin 数据库。我可以连接到数据库并插入其中，但我无法从中获取数据并将其显示在我的页面上。

这是我的 Employee-list.component.ts：

import { Observable } from 'rxjs'
import { EmployeeService } from './../employee.service'
import { Employee } from './../employee'
import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'
@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css'],
})
export class EmployeeListComponent implements OnInit {
  employees!: Observable<Employee[]>
  employee: Employee = new Employee()
  constructor(private employeeService: EmployeeService, private router: Router) {}
  ngOnInit() {
    this.reloadData()
  }
  reloadData() {
    console.log(this.employeeService.getEmployeesList(this.employee))
    this.employee.setOperation('listePersonne')
    this.employees = this.employeeService.getEmployeesList(this.employee)
  }
  deleteEmployee(id: number) {
    this.employeeService.deleteEmployee(id).subscribe(
      (data) => {
        console.log(data)
        this.reloadData()
      },
      (error) => console.log(error)
    )
  }
  employeeDetails(id: number) {
    this.router.navigate(['details', id])
  }
  updateEmployee(id: number) {
    this.router.navigate(['update', id])
  }
}

这是我的employee.service.ts：

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
import { map } from 'rxjs/operators'
import { Employee } from './employee'
@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  // private baseUrl = 'http://localhost:8080/springboot-crud-rest/api/v1/employees';
  private baseUrl = 'http://localhost/tpangularmysql/gestiPersonne.php'
  constructor(private http: HttpClient) {}
  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}?operation=getInfoPersonne&personne_id=${id}`)
  }
  createEmployee(employee: Employee): Observable<Object> {
    console.log(employee)
    return this.http.post(`${this.baseUrl}`, employee)
  }
  updateEmployee(employee: Employee): Observable<Object> {
    return this.http.put(`${this.baseUrl}?operation=modifierPersonne`, employee)
  }
  deleteEmployee(id: number): Observable<any> {
    console.log(`${this.baseUrl}?operation=supprimerPersonne/${id}`)
    return this.http.delete(`${this.baseUrl}?operation=supprimerPersonne&personne_id=${id}`, {
      responseType: 'text',
    })
  }
  getEmployeesList(employee: Employee): Observable<any> {
    return this.http.get(`${this.baseUrl}?operation=` + employee.operation).pipe(map((res) => res['data']))
  }
}

现在我的问题出现在employee.service.ts 中的map(res => res["data"]) 行中。我收到这些错误：

元素隐式具有“任何”类型，因为“数据”类型的表达式不能用于索引类型“对象”。 “对象”类型上不存在属性“数据”。

【问题讨论】：

什么console.log({res})?
EmployeeService 中的方法属于Observable<any> 类型，但您应该避免使用any。你能分享响应代码示例来创建界面和改进打字吗？

标签： angular typescript rxjs

【解决方案1】：

快速解决方法是改变这个：

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

到这里：

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

另一种选择是在 tsconfig 中关闭 NoImplicitAny。

虽然，上述两种解决方案本质上都只是绕过打字，这并不好。

最好使用接口来键入您的 HTTP 响应。

【讨论】：