无法将数据从服务传递到Angular中的组件

Question

I am trying to pass data from my service to my component but unable to do so. Below is the code from service and component:

authService.service.ts

import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
import{Http, RequestOptions,Headers} from '@angular/http'
import { Observable} from 'rxjs';
import { URLSearchParams,Response } from '@angular/http';


 @Injectable()

  export class AuthenticationService
    {
         constructor(private http: Http) { }
         username:string = 'Admin';
         password:string='livelink';  
         result :any;

        login() 
         {

           let urlSearchParams = new URLSearchParams();
           urlSearchParams.append('Username', this.username);
           urlSearchParams.append('Password', this.password);

    return this.http.post('http://localhost/otcs/cs.exe/api/v1/auth',urlSearchParams)
        .subscribe((res:Response) => 
        {               
            const data = res.json();                                    
            let headers = new Headers({
                'OTCSTICKET': data['ticket']
            });

            let request_options = new RequestOptions({ headers:headers});

           return this.http.get("http://localhost/otcs/cs.exe/api/v1/nodes/16236/output",request_options)          
               .subscribe(data =>
               {    
                   const report = data.json();
                   this.result = report;
                   console.log(this.result);             
               },
                err => {
                    console.log(err);                
                }


       )});


   }
}

App Component

      import { Component } from '@angular/core';
      import { AuthenticationService } from './authNew.servive';
      import { HttpClient, HttpHeaders } from '@angular/common/http';
      import{Http, RequestOptions,Headers} from '@angular/http'
      import { Observable} from 'rxjs';
      import { URLSearchParams,Response } from '@angular/http';

      @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.css']
                 })

           export class AppComponent 
         {

             constructor(private authenticationservice:AuthenticationService)
              {

                this.authenticationservice.login().subscribe(res:Response =>
                  {
                    //somecode
                   }) ;

            }

         }

The Problem is when I am trying to subscribe in AppComponent, I get the below error:

I understand I am doing something really silly here. Also I tried to use map instead of subscribe in my service for both the POST and GET calls but in that case i get an error as sown below:

I was importing 'rxjs/add/operator/map'; when trying to use map and still I was getting the error, hence i thought about subscribing within the service itself but that isn't helping either. Please help me in understanding how can I get this sorted and get data from my service to be available in AppComponent.

Thanks !

Answer 1

You are subscribing twice, in the service and in the component.

You have in the official tutorial how should be managed this scenario:

Tour of heroes http

The resume is that you should get the observable in your service

return this.http.get("http://localhost/otcs/cs.exe/api/v1/nodes/16236/output",request_options);   

and manage the subscribe in the component:

this.authenticationservice.login().subscribe(res:Response =>
                  {
                    //somecode
                   }) ;