Angular .subscribe giving compilation errors

Question

I'm trying to display a http get call response data in my component template.

I'm trying to extract the object data from the Observable being returned from my Service to my component. I used .subscribe method and I'm getting "Type 'Subscription' is not assignable to type DataModel. Property 'entitlement' missing in type Subscription".

Not sure where I'm going wrong. Please advise-

My model file:-

   export class DataModel {
        public entitlement: string;
        public serviceId: string;
        public techType: string;
        public avcId: string;
        public accessTechnology: string;
        public subAccessType: string;
    }

My component file:-

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataModel } from '../data-model';
import { DataFetchService } from '../data-fetch.service';
import { DataRequest } from '../data-request';


    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css']
    })
    export class DashboardComponent{
        serviceType: string;
        serviceNumber: string;         
        cidn: string;
        spid: string;
        public data: DataModel;

      constructor(private datafetchService: DataFetchService) {
          }

       datapull(): void{
          this.data = this.datafetchService.getData(this.serviceType,this.serviceNumber,this.cidn,this.spid).subscribe(data => {this.data = data});
      }

    }

My service file:-

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { DataModel } from './data-model';
import { UUID } from 'angular2-uuid';



@Injectable()

export class DataFetchService {

    private url: string = "xxx";
    private auth: string = "yyyy";
    private xrid: string;

  constructor(private http: HttpClient) { 
   }

   ngOnInit() {
    this.xrid = UUID.UUID();
  }

  getData(serviceType: string,serviceNumber: string,cidn: string,spid:string): Observable<DataModel> {

      const params = new HttpParams()
    .set('serviceType', serviceType)
    .set('serviceNumber', serviceNumber);
      const headers = new HttpHeaders()
            .set("CIDN", cidn).set("SPID", spid).set("x-request-id", this.xrid).set("Authorization",this.auth);

    return this.http.get<DataModel>(this.url,{headers,params});
  }

}

Subscribe has a return type, which doesnt match the type of the data member in the example component — Jota.Toledo

matmo matmo · Accepted Answer · 2018-01-18T20:09:53

When you call subscribe(), you get back a Subscription object. You assigned that subscription to your this.data property when you did:

this.data = this.datafetchService.getData(this.serviceType,this.serviceNumber,this.cidn,this.spid).subscribe(data => {this.data = data});

Just remove the assignment, and it should work as you expect it to:

this.datafetchService.getData(this.serviceType,this.serviceNumber,this.cidn,this.spid).subscribe(data => {this.data = data});

Typescript was trying to interpret the Subscription as a DataModel object, thats why it tells you "type 'Subscription' is not assignable to type DataModel. Property 'entitlement' missing in type Subscription""

Angular .subscribe giving compilation errors

1 Answers