"No overload matches this call" in Angular 11

user_11755819 0
Viewed 19426

I was doing an Angular tutorial, when I ran into the following error in the home.component.ts file:

No overload matches this call. Overload 1 of 5, '(observer?: PartialObserver<HttpResponse>): Subscription', gave the following error. Argument of type '(data: any[]) => void' is not assignable to parameter of type 'PartialObserver<HttpResponse>'. Property 'complete' is missing in type '(data: any[]) => void' but required in type 'CompletionObserver<HttpResponse>'. Overload 2 of 5, '(next?: (value: HttpResponse) => void, error?: (error: any) => void, complete?: () => void): Subscription', gave the following error. Argument of type '(data: any[]) => void' is not assignable to parameter of type '(value: HttpResponse) => void'. Types of parameters 'data' and 'value' are incompatible. Type 'HttpResponse' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.

I have looked it up, but have been unable to find any solutions to this issue. I have tried to to disable strict, noImplicitAny, noImplicitReturns in the tsconfig.json, but they have not solved this issue. I would prefer if there was a solution to this issue while keeping all three settings on true in the tsconfig.json file.

Any help would be appreciated.

Thanks

EDIT: The error occurs in the home.component.ts file when dealing with the data after the AJAX call:

this.dataService.sendGetRequest().subscribe(data: any[] => {
      this.products = data;
    });
  }
angular typescript
2 Answers

Solution: change any[] to any in the subscribe method as so;

this.dataService.sendGetRequest().subscribe(data: any => {
      this.products = data;
    });
  }
user_160316540

First: it would be a courtesy if you put your relevant code in the question itself, instead of just the link to stackblitz. The first thing the error message gives you is: which file, which line, which position (Error in src/app/home/home.component.ts (19:49)). Which is

    this.dataService.sendGetRequest().subscribe((data: any[]) => {
//                                              ^ about here

Second: you put observe: "response" in your HttpClient call. Well, in such case you won't get simply data: any[] in your response object, but a whole HttpResponse object. You need to access its body property. I suggest adding

map({ body } => body)

at the end of the pipe in sendGetRequest in DataService.

user_71942680
Related