属性“订阅”在类型上不存在

Question

I am building an angular 4 component and writing a service to return a resultset. I am getting a compile error in the movie component in the code where its trying to call the movieservice. The error is in the getMovies method in movie component. Not sure what the problem is

The error states Property 'subscribe' does not exist on type IMovie[].

Below is the code

IMovie interface

export interface IMovie{
    movieId:number;
    name:string;
    actor:string;
    director:string;
    movieLength:number;  
}

Movie service

import {Injectable} from '@angular/core';
import {MRDBCommonService} from '../shared/services/mrdb.common.service';
import {IMovie} from './movie.interface';
const URL_MOVIE = '/api/movie';

@Injectable()
export class MovieService 
{

constructor(private _mrdbCommonService: MRDBCommonService){}

    getMovies() : IMovie[] {
        return[
         {
            movieId:1,
            name:"Titanic",
            actor:"Test1",
            director:"Test2",
            movieLength : 2 
         },
         {
            movieId:2,
            name:"Titanic",
            actor:"Test1",
            director:"Test2",
            movieLength:2 
         },
         {
            movieId:3,
            name:"Titanic",
            actor:"Test1",
            director:"Test2",
            movieLength: 2 
         }
        ];
    }
}

Movie component

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


@Component({
  moduleId: module.id,
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css'],
  providers:[MovieService]
})

export class MovieComponent implements OnInit {

public movieList : IMovie = null;

  constructor(private movieSerice : MovieService) {
    this.getMovies();
   }

  ngOnInit() {

  }

  private getMovies()
  {
    this.movieSerice.getMovies().subscribe((result : IMovie) => {

    this.movieList = result;
    });

  }

}

Answer 1

Your getMovies() does not return an Observable type, hence can't be subscribed. You need to wrap it with Observable.of() :

getMovies(): Observable<IMovie[]> {
    return Observable.of([
        {
            movieId: 1,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 2,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 3,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        }
    ]);
}

Answer 2

You are returning the array of movie list of type IMovie, some correction you need, As you are not returning Observable but you are trying to subscribe that's why you are getting error .

Movie component

as you are receiving the collection of IMovie type object so your movieList variable should be the array of IMovie.

public movieList : IMovie[]

Your service should like this -

import {Observable} from "rxjs";// First you need to import Observable

Then you should return Observable type data from your getMovies method. Now your method should look like this

getMovies(): Observable<IMovie[]> {

        return Observable.of([
        {
            movieId: 1,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 2,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 3,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        }
    ]);
    }

I think it will works fine and u can ask anything if you have any query, Happy Coding