error TS2322: Type 'Object' is not assignable to type 'Movie'? Angular 7

Question

I'm sorry to distract with my stupid question. I recently just study Angular 2+ and still do not understand everything. I looked at other answers to this question, but they did not help me. I have a function that returns a list and a separate item of the list.

Code from Service:

constructor(private http: HttpClient) { }
getMovies() {
 return this.http.get(this.baseUrl);
}
getMovie(id: number) {
return this.http.get(this.baseUrl + id);
}

The component that returns lists

 private movies = [];
 constructor(private movieService: MovieService) {}
 ngOnInit() {
  this.getMovies();
 }
private getMovies() {
 this.movieService.getMovies()
  .subscribe((response: any) => {
    this.movies = response.results;
  });
}

And my component which returns a list item:

movie = new Movie();

constructor(
 private movieService: MovieService,
 private activeRoute: ActivatedRoute) {
}

ngOnInit(): void {
 this.getMovie();
}

getMovie(): void {
 const id = +this.activeRoute.snapshot.paramMap.get('id');
  this.movieService.getMovie(id)
  .subscribe(movie => this.movie = movie);
}

Whatever I do and how I did not rewrite the code, I get the same error.

ERROR in src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'page' is missing in type 'Object'.

How to correct this error, or at least where you can read about it, see how it is done? I have an API request which returns the following:

{"page": 1,
"results": [
{
  "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg",
  "adult": false,
  "overview": "Framed in the 1940s for the...",
  "release_date": "1994-09-10",
  "genre_ids": [
    18,
    80
  ],
  "id": 278,
  "original_title": "The Shawshank Redemption",
  "original_language": "en",
  "title": "The Shawshank Redemption",
  "backdrop_path": "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
  "popularity": 5.446135,
  "vote_count": 5250,
  "video": false,
  "vote_average": 8.32
},
{
  "poster_path": "/lIv1QinFqz4dlp5U4lQ6HaiskOZ.jpg",
  "adult": false,
  "overview": "Under the direction o...",
  "release_date": "2014-10-10",
  "genre_ids": [
    18,
    10402
  ],
  "id": 244786,
  "original_title": "Whiplash",
  "original_language": "en",
  "title": "Whiplash",
  "backdrop_path": "/6bbZ6XyvgfjhQwbplnUh1LSj1ky.jpg",
  "popularity": 9.001948,
  "vote_count": 2072,
  "video": false,
  "vote_average": 8.28
}
],
"dates": {
"maximum": "2016-09-01",
"minimum": "2016-07-21"
},
"total_pages": 33,
"total_results": 649
}

I think I have error in service, because I do not get the pages when I display the list and a separate item of the list. But I did not find how to do it differently, or these options are no longer working.

Answer 1

you can either specify your type in your get function

return this.http.get<Movie>(this.baseUrl);

Or specify it in your function

getMovies(): Observable<Movie> {
 return this.http.get(this.baseUrl);
}

Or do both

 getMovies(): Observable<Movie> {
     return this.http.get<Movie>(this.baseUrl);
}

Answer 2

因为您正在使用HttpClient ，所以您必须提供返回结果的必要转换， 如此答案所示，其中显示了如何设置组件和服务提供程序以调用和接收http JSON结果。