As a developer venturing into API design with a backend server that handles client-side calls, I find myself grappling with Typescript, transitioning from a Java background. Encountering the error message "No overload matches this call" has left me seeking clarity.
In laying down the foundation for services to be invoked, I've outlined the following functions within this file:
// Establishment of functions for backend communication via http requests using httpclient
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Employee } from './employee';
import { environment } from 'src/environments/environment';
@Injectable({providedIn: 'root'}) // Angular service declaration
export class EmployeeService {
private apiServerUrl = environment.apiBaseUrl;
constructor(private http: HttpClient) {}
public getEmployee(): Observable<Employee> {
return this.http.get<any>(`${this.apiServerUrl}/employee/all`);
}
public addEmployee(employee: Employee): Observable<Employee> {
return this.http.post<Employee>(`${this.apiServerUrl}/employee/add`, employee);
}
public updateEmployee(employee: Employee): Observable<Employee> {
return this.http.put<Employee>(`${this.apiServerUrl}/employee/add`, employee);
}
public deleteEmployee(employeeId: number): Observable<void> {
return this.http.delete<void>(`${this.apiServerUrl}/employee/delete/${employeeId}`);
}
}
This excerpt pertains to the app.component.ts setup:
import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public employees: Employee[];
constructor(private employeeService: EmployeeService){}
ngOnInit(){
this.getEmployee();
}
public getEmployee(): void{
this.employeeService.getEmployee().subscribe(
(response: Employee[]) => {
this.employees = response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
);
}
}