I am getting error while using angular 4 and observable.
/Users//backend/src/app/app.component.ts (15,55): Type '() => any' is not assignable to type 'State[]'. /Users//backend/src/app/app.component.ts (15,55): Type '() => any' is not assignable to type 'State[]'. Property 'includes' is missing in type '() => any'.
What am I doing wrong
My Model
export class State {
id: number;
state: string;
code: string;
}
My Service
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';
import {environment} from '../../../environments/environment';
@Injectable()
export class StateService {
private baseUrl: string = environment.baseUrl;
constructor( private http: Http) {}
/**
* Get all States
*/
GetStates() {
return this.http.get(this.baseUrl + 'v1/states')
.map((res: Response) => res.json);
// .do( data => console.log(data));
}
}
My Component
import { Component, OnInit } from '@angular/core';
import {StateService} from './shared/services/state.service';
import {State} from './shared/models/state';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent implements OnInit {
states: State[] ;
constructor(private stateService: StateService) {}
ngOnInit() {
this.stateService.GetStates().subscribe(states => this.states = states );
}
}
App.Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StateService } from './shared/services/state.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [
StateService
],
bootstrap: [AppComponent]
})
export class AppModule { }
There are two issues.
First, you aren't invoking a json response, you are simply referencing the method. You need to change res.json to res.json():
.map((res: Response) => res.json());
Second, you aren't declaring a type for the result of your subscribe. You should explicitly specify the type of the result:
this.stateService.GetStates().subscribe((states: State[]) => this.states = states);
Since the parameter from your subscribe is of type any, unless you specify a type up front as I have above, or cast it before assignment, the typescript compiler will let you know that the types are invalid.
In my case res.json() was not an available function. Also another difference: My http service returns the whole Observable...
import { Injectable, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Dashboard } from "./app.component";
import { HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class HttpServiceService {
public dashboards;
constructor(private http: HttpClient) {}
public handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
getDashboard() : any {
let results;
const headers = new HttpHeaders()
.set('Access-Control-Allow-Origin','*')
.set('Content-Type', 'application/json');
return this.http.get('http://localhost:8080/dashboards',
{headers,responseType: "json"}).catch(this.handleError);
}
}
... then I read the output of the Observable from my AppComponent:
constructor(private http:HttpServiceService) {
this.http.getDashboard().subscribe(results => this.dashboardList = results);
}