angular - 错误 TS2769 : No overload matches this call

Question

我正在构建一个小型 Angular 应用:

movie.service.ts 看起来像这样

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable()
export class MovieService {
  constructor(private httpClient: HttpClient) {}

  getMovieList() {
    return this.httpClient.get(environment.gateway + '/movies');
  }

  addMovie(movie: Movie) {
    return this.httpClient.post(environment.gateway + '/movies', movie);
  }

  watchedMovie(movie: Movie) {
    return this.httpClient.put(environment.gateway + '/movies', movie);
  }

  deleteMovie(movie: Movie) {
    return this.httpClient.delete(environment.gateway + '/movies/' + movie.id);
  }
}

export class Movie {
  id: string;
  title: string;
  year: Number;
  watched: boolean;
}

接下来我创建了 movie.components.ts:

import { Component, OnInit } from '@angular/core';
import { MovieService, Movie } from '../movie.service';

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

  activeMovies: Movie[];
  watchedMovies: Movie[];
  todoMessage: string;
  movieTitle: string;
  movieYear: number;

  constructor(private movieService: MovieService) { }

  ngOnInit() {
    this.getAll();
  }

  getAll() {
    this.movieService.getMovieList().subscribe((data: Movie[]) => {
      this.activeMovies = data.filter((a) => !a.watched);
      this.watchedMovies = data.filter((a) => a.watched);
    });
  }

  addMovie() {
    var newMovie : Movie = {
      title: this.movieTitle,
      id: '',
      year: this.movieYear,
      watched: false
    };

    this.movieService.addMovie(newMovie).subscribe(() => {
      this.getAll();
      this.movieTitle = '';
    });
  }

  watchedMovie(movie: Movie) {
    this.movieService.watchedMovie(movie).subscribe(() => {
      this.getAll();
    });
  }

  deleteMovie(movie: Movie) {
    this.movieService.deleteMovie(movie).subscribe(() => {
      this.getAll();
    })
  }
}

现在我在这一行有一个错误:

this.movieService.getMovieList().subscribe((data: Movie[]) => {

错误:

✔ Compiled successfully.

    Error: src/app/movie/movie.component.ts:24:48 - error TS2769: No overload matches this call.
      Overload 1 of 5, '(observer?: NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined): Subscription', gave the following error.
        Argument of type '(data: Movie[]) => void' is not assignable to parameter of type 'NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined'.
          Property 'complete' is missing in type '(data: Movie[]) => void' but required in type 'CompletionObserver<Object>'.
      Overload 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', gave the following error.
        Argument of type '(data: Movie[]) => void' is not assignable to parameter of type '(value: Object) => void'.
          Types of parameters 'data' 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 'Movie[]': length, pop, push, concat, and 26 more.

    24     this.movieService.getMovieList().subscribe((data: Movie[]) => {
                                                      ~~~~~~~~~~~~~~~~~~~~

      node_modules/rxjs/internal/types.d.ts:64:5
        64     complete: () => void;
               ~~~~~~~~
        'complete' is declared here.

我做错了什么或者我在这里遗漏了什么？

Answer 1

默认情况下，HTTP Get请求的类型是Observable<Object> .您需要像这样向 API 调用添加类型。

getMovieList() {
    return this.httpClient.get<Movie[]>(environment.gateway + '/movies');
}