Блог

Я использую Angular 12 с xampp для доступа к своей базе данных phpmyadmin. Я могу подключиться к базе данных и вставить в нее, но я не могу вывести данные из нее и показать их на своей странице.

Это мой список сотрудников.компонент.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])
  }
}
 

А это мой сотрудник.сервис.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=getInfoPersonneamp;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=supprimerPersonneamp;personne_id=${id}`, {
      responseType: 'text',
    })
  }
  getEmployeesList(employee: Employee): Observable<any> {
    return this.http.get(`${this.baseUrl}?operation=`   employee.operation).pipe(map((res) => res['data']))
  }
}
 

Теперь моя проблема связана map(res => res["data"]) с сотрудником.сервис.ts.
Я получаю эти ошибки :

Элемент неявно имеет тип «любой», поскольку выражение типа»данные» не может использоваться для индексирования типа «Объект». Свойство «данные» не существует для типа «Объект».

Быстрое решение состоит в том, чтобы изменить это:

 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']))
}
 

Другой альтернативой является отключение NoImplicitAny в tsconfig.

Хотя оба вышеперечисленных решения, по сути, просто обходят типизацию, что нехорошо.

Лучше использовать интерфейсы для ввода вашего HTTP-ответа.