No overload matches this call while calling angular service method --

Let me explain the problem. I am trying to call a method defined in my Angular service in my component.

1. My Angular Service method:

getGadgetDetailById(id: number):Observable<Gadget | undefined>
{
return of(this.gadgets.find(g => g.id === id))
.pipe(catchError(error => {

console.error('Error fetching gadget details:', error);
return of(undefined);
})
);
}


Here 'gadgets' is obviously an array of type 'Gadget'.

1. Gadget model type:

export interface Gadget {
id: number;
name: string;
distributor: string;
description: string;
price: number;
available: boolean;
rating?: number;
}

1. I am trying to call the service method in my component as:

getGadgetDetails()
{
this.gService.getGadgetDetailById(this.gadgetId)
.subscribe({
next: (gadget:Gadget) => {
this.gadget = gadget;
},
error: (err:any) => {
console.error('Error fetching gadget details:', err);
}
})
}


I am getting an error weebly on 'next'. If I hover on it, I get:

No overload matches this call. Overload 1 of 2, '(observerOrNext?: Partial<Observer<Gadget | undefined>> | ((value: Gadget | undefined) => void) | undefined): Subscription', gave the following error.
​

What is it? Pl explain in simple terms where I went wrong in the definition & subsequent my calling of the service method.

Thanks!

Continue reading...