No overload matches this call for using any[] instead of any in Angular when displaying data in app.-CodePudding

I am fairly new to angular, I am using Angular 15, I basically have an Rest API response that I want to parse and show in the UI using angular. For that I used HttpClient and GET request to parse the response.

The code for app.component.ts is:

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent{

  constructor(private http: HttpClient){}
  posts: any[] = [];
  loadPosts(){
    this.http
    .get('https://jsonplaceholder.typicode.com/todos/1')
    .subscribe((posts: any[])=>{
      this.posts=posts;
    });
  }
}

EDIT I changed the link for the get request call so that it can actually be used.

The code for app.component.html is:

This is a template for app component html
<br>
<button type="button" (click)="loadPosts()" >Get Response Body</button>

<br>
<div *ngFor="let post of posts">
  <h1>{{ posts.includes }}</h1>
  <p> {{ posts.keys }} </p>
</div>
<router-outlet></router-outlet>

I am trying to get certain values from the response like includes and keys from the API call that I want to parse and show in the UI. That's why I used ngFor to iterate through the response and show only those sections.

My main issue is I'm getting this error:

src/app/app.component.ts:19:16 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(observer?: Partial<Observer<Object>> | undefined): Subscription', gave the following error.
    Type '(posts: any[]) => void' has no properties in common with type 'Partial<Observer<Object>>'.
  Overload 2 of 3, '(next: (value: Object) => void): Subscription', gave the following error.
    Argument of type '(posts: any[]) => void' is not assignable to parameter of type '(value: Object) => void'.
      Types of parameters 'posts' and 'value' are incompatible.
        The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
          Type 'Object' is missing the following properties from type 'any[]': length, pop, push, concat, and 29 more.
  Overload 3 of 3, '(next?: ((value: Object) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription', gave the following error.
    Argument of type '(posts: any[]) => void' is not assignable to parameter of type '(value: Object) => void'.
      Types of parameters 'posts' and 'value' are incompatible.
        Type 'Object' is not assignable to type 'any[]'.
          The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?

19     .subscribe((posts: any[])=>{
                  ~~~~~~~~~~~~~~~~~

When I use [] In

.get('https://cdn.contentful.com/myCustomApiLink')
    .subscribe((posts: any[])=>{
      this.posts=posts;

but without using [] I'm getting error:

app.component.ts:19 ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.mjs:28817:19)
    at NgForOf.ngDoCheck (common.mjs:3213:42)
    at callHook (core.mjs:2758:18)
    at callHooks (core.mjs:2717:17)
    at executeCheckHooks (core.mjs:2649:5)
    at refreshView (core.mjs:12084:21)
    at refreshComponent (core.mjs:13208:13)
    at refreshChildComponents (core.mjs:11865:9)
    at refreshView (core.mjs:12125:13)
    at detectChangesInternal (core.mjs:13352:9)
load (async)        
loadPosts   @   app.component.ts:19
AppComponent_Template_button_click_2_listener   @   app.component.html:3
Show 82 more frames

in the console.

Any Help is appreciated! Thanks!

CodePudding user response：

You have to type the get method

this.http
.get<any>('https://cdn.contentful.com/myCustomApiLink')
.subscribe((posts: any[])=>{
  this.posts=posts;
});

I would suggest not using any at all

CodePudding user response：

Since the API is returning an object there is a mismatch between the response type and the type mentioned.

The required array seems to be a part of the response, So try piping the response before subscribing to it to get just the required array.

this.http.get('https://cdn.contentful.com/myCustomApiLink')
  .pipe(
      map((data: any) => data.items),
      catchError(error => { return throwError('Error') }))
  .subscribe((posts: any[]) => {
      this.posts = posts;
  });