CODEWITHSUNDEEP
angularangular-services
Vel
Vel

Reputation: 9342

shared services not working in angular 2

I trying to create a shared services for access data to country-detail.component.ts component. Im getting error. I cannot access data from countrydetailcomponent. how to fix the issue?

country-detail.component.ts (31,44): Property 'subscribe' does not exist on type '() => Observable'.)

countries.services.ts

  import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { environment } from 'environments/environment';
  import 'rxjs/Rx';
  import 'rxjs/add/operator/map';

  import {Countries} from '../countries';

  @Injectable() 

  export class CountriesService {

    constructor(private http: Http) {}

    Countries:Countries;

    getCountries() {
       if ( this.Countries) { 
        return Observable.of(this.Countries); 
      } else { 
       return this.http.get(environment.ApiEndPointURLGetCities)
        .map(this.extractData);
      }
    }

    private extractData(res: Response) {      
      let Countries = res.json();   
      return Countries || { };
    }

  }

  export interface Countries {
    Status: Number;
    msg: String;
    categorylist: any[];
  }

country-detail.component.ts

import { Component, OnInit }      from '@angular/core';
import { Router,ActivatedRoute, Params } from '@angular/router';

import { Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/observable/of'; 

import { CountriesService }  from '../services/countries.services';

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


export class CountryDetailComponent implements OnInit {  
    public edited = true;      
    offset = 100;
    errorMessage: string;

    constructor(
       private _CountriesService: CountriesService            
    ) { 

       this._CountriesService.getCountries.subscribe((observer) => {
        console.log('Subscribe component', JSON.parse(observer._body));
      });
    }

    ngOnInit(): void {      

    } 
}


export interface Cities {
  Status: String;
  msg: String;
  categorylistvalues: any;
}

Ngmodule

  @NgModule({
      imports: [   
        BrowserModule,
        FormsModule,    
        AppRoutingModule,
        HttpModule,
        ModalModule,    
        NgbModule.forRoot(),   

      ],
      declarations: [
        AppComponent,    
        HomepageComponent,
        HeaderComponent,
        FooterComponent,    
        CountryDetailComponent,   
      ],

      providers: [ CitiesService, ModalBackdropComponent,CountriesService,Title,  
        { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
        ],
      bootstrap: [ AppComponent]


    })
    export class AppModule { }

console.log

enter image description here

Upvotes: 0

Views: 988

Answers (1)

Tiep Phan
Tiep Phan

Reputation: 12596

it shoud be

this._CountriesService.getCountries().subscribe(...)

getCountries is method, not property

update put your service in providers array in @NgModule decorator.

Upvotes: 2

Related Questions