Saya mendapatkan error saat menggunakan angular 4 dan observable.
/Usersers//backend/src/app/app.component.ts (15,55): Type '() => any' tidak dapat ditetapkan ke type 'State[]'. /Usersers//backend/src/app/app.component.ts (15,55): Type '() => any' is not assignable to type 'State[]'. Property 'includes' tidak ada dalam tipe '() => any'.
Apa yang saya lakukan salah
Model saya
export class State {
id: number;
state: string;
code: string;
}
Layanan Saya
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));
}
}
Komponen Saya
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 { }
Ada dua masalah.
Pertama, Anda tidak memanggil respons json, Anda hanya mereferensikan metode. Anda perlu mengubah res.json
menjadi res.json()
:
.map((res: Response) => res.json());
Kedua, Anda tidak mendeklarasikan tipe untuk hasil subscribe Anda. Anda harus secara eksplisit menentukan jenis hasilnya:
this.stateService.GetStates().subscribe((states: State[]) => this.states = states);
Karena parameter dari subscribe Anda bertipe any
, kecuali jika Anda menentukan tipe di depan seperti yang saya miliki di atas, atau cast sebelum penugasan, kompilator typescript akan memberi tahu Anda bahwa tipe tersebut tidak valid.
Dalam kasus saya res.json() bukanlah fungsi yang tersedia. Juga perbedaan lain: Layanan http saya mengembalikan seluruh 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);
}
}
... kemudian saya membaca output dari Observable dari AppComponent saya:
constructor(private http:HttpServiceService) {
this.http.getDashboard().subscribe(results => this.dashboardList = results);
}