I've been working on a small Angular application:
The file movie.service.ts is structured like this
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;
}
After that, I proceeded to create 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();
})
}
}
However, an error has now surfaced on the following line:
this.movieService.getMovieList().subscribe((data: Movie[]) => {
The error message reads as follows:
✔ 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>
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.
What could be causing this issue or what am I overlooking?