Recibo un error al usar angular 4 y observable.
/Users/ /backend/src/app/app.component.ts (15,55): el tipo '() => any' no se puede asignar al tipo 'State[]'. /Users/ /backend/src/app/app.component.ts (15,55): el tipo '() => any' no se puede asignar al tipo 'State[]'. Falta la propiedad 'incluye' en el tipo '() => cualquiera'.
Qué estoy haciendo mal
Mi modelo
export class State { id: number; state: string; code: string; }mi servicio
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)); } }mi componente
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 ); } }Módulo de aplicación
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 { }Hay dos problemas.
Primero, no está invocando una respuesta json, simplemente está haciendo referencia al método. Debe cambiar res.json a res.json() :
.map((res: Response) => res.json());En segundo lugar, no está declarando un tipo para el resultado de su suscripción. Debe especificar explícitamente el tipo de resultado:
this.stateService.GetStates().subscribe((states: State[]) => this.states = states); Dado que el parámetro de su suscripción es de tipo any , a menos que especifique un tipo por adelantado como lo hice anteriormente, o lo emita antes de la asignación, el compilador de TypeScript le informará que los tipos no son válidos.
En mi caso, res.json() no era una función disponible. También otra diferencia: mi servicio http devuelve todo el 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); } }... luego leí la salida del Observable desde mi AppComponent:
constructor(private http:HttpServiceService) { this.http.getDashboard().subscribe(results => this.dashboardList = results); }