如何使用 .subscribe in angular 为数组赋值？

Question

I am using a HttpClient calling.I am trying to assign values to posts[] which i hav defined as type any.

I am getting error as follows:

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 26 more.

My code for posts.component.html

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

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

  posts: any[];

  constructor(http:HttpClient) { 

    http.get('http://jsonplaceholder.typicode.com/posts').subscribe(response =>{
      this.posts=response;})
  }

  ngOnInit(): void {
  }

}

Answer 1

You have to specify the type of the response:

http.get<any[]>('http://jsonplaceholder.typicode.com/posts').subscribe(response => {
  this.posts = response;
})

Answer 2

You should type your httpClient.get method call, like this:

http.get<any[]>('http://jsonplaceholder.typicode.com/posts').subscribe(response => {
   this.posts = response;
})

Best practice is also to create an interface for your model, for example:

export interface Post {
  id: number,
  title: string,
  ...
}

So your code could be :

export class PostsComponent implements OnInit {
  posts: Post[];

  constructor(http: HttpClient) { 

    http.get<Post[]>('http://jsonplaceholder.typicode.com/posts').subscribe(response => {
      this.posts = response;
    })
  }

  ngOnInit(): void {
  }

}