Property 'subscribe' does not exist on type {}

Question

Service.ts

   import { Injectable } from '@angular/core';

    const RELEASES = [
{
  id: 1,
  title: "Release 1",
  titleUrl: "release-1",
  year: "2016"
},
{
  id: 2,
  title: "Release 2",
  titleUrl: "release-2",
  year: "2016"
},
{
  id: 3,
  title: "Release 3",
  titleUrl: "release-3",
  year: "2017"
}

]

   @Injectable()
   export class ReleaseService {
     visibleReleases =[];

     getReleases(){
       return this.visibleReleases = RELEASES.slice(0);
     }

     getRelease(id:number){
       return RELEASES.slice(0).find(release => release.id === id)
     }

   }

Component.ts

   import { Component, OnInit, OnDestroy } from '@angular/core';
   import { ReleaseService } from '../service/release.service';
   import { ActivatedRoute, Params } from '@angular/router';
   import { IRelease } from '../releases/release';

   @Component({
     selector: 'app-details',
     templateUrl: './details.component.html',
     styleUrls: ['./details.component.css']
   })
   export class DetailsComponent implements OnInit {
     private sub: any;
     private release: string[];

     constructor(
       private _releaseService: ReleaseService,
       private route: ActivatedRoute
     ) { }

     ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
           let id = params['id'];
           this._releaseService.getRelease(id).subscribe(release => this.release = release);
       });    
     }

     ngOnDestroy() {
       this.sub.unsubscribe();
     }

   }

IRelease interface

   export class IRelease {
       id: number;
       title: string;
       titleUrl: string;
       year: string;
   }

I'm trying to create a "Detail page" in my Angular4 app. What I want is to return a chosen item by the code below:

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
           let id = params['id'];
           this._releaseService.getRelease(id).subscribe(release => this.release = release);
       });    
     }

And there's an error: Property 'subscribe' does not exist on type '{ id: number; title: string; titleUrl: string; year: string; }'.

What have I done wrong?

Well what does `getRelease` return? You're treating it like it's an observable, by trying to subscribe to it, but is it? — jonrsharpe, Oct 22 '17 at 09:04
getRelease() returns a clicked release, then a "details" page should appear. And on that "details" page I want to appear the details of the chosen item / release — Alexandr Belov, Oct 22 '17 at 09:11
But does it return an *observable* of that release? Because your code implies you think it does, and the error message is telling you pretty clearly that it doesn't. — jonrsharpe, Oct 22 '17 at 09:12

score 1 · Answer 1 · answered Oct 22 '17 at 09:25

Your ReleaseService#getRelease() method returns plain object, you do not need to subscribe to it. Subscribe is only for observables (more about them e.g. here).

You can simply do:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        let id = params['id'];
        this.release = this._releaseService.getRelease(id);
    });    
}

Property 'subscribe' does not exist on type {}

1 Answers1