Angular 4 エラー。プロパティ 'includes' is missing in type '() => any'

angular 4とobservableを使用しているときにエラーが発生します。

/Users//backend/src/app/app.component.ts (15,55):型 '() => any' は、型 'State[]' に割り当てられません。 /Users//backend/src/app/app.component.ts (15,55)です。型 '() => any' は、型 'State[]' に代入することができません。 プロパティ 'includes' がタイプ '() => any' で欠落しています。

何が間違っているのでしょうか？

マイモデル

export class State {
  id: number;
  state: string;
  code: string;
}

マイサービス

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));
  }
}

マイコンポ

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 { }
プログラミング
angular typescript
18日 4月 2017 в 11:29
まだビューはありません
ソリューション

課題は2つあります。

まず、json レスポンスを呼び出しているのではなく、単にメソッドを参照しているに過ぎません。 res.jsonをres.json()` に変更する必要があります。

.map((res: Response) => res.json());

第二に、subscribeの結果の型を宣言していないことです。 結果の型は明示的に指定する必要があります。

this.stateService.GetStates().subscribe((states: State[]) => this.states = states);

subscribeのパラメータは any 型なので、上記のように前もって型を指定するか、代入前にキャストしない限り、typescriptコンパイラーは型が無効であることを知らせます。

David L
編集した答え 18日 4月 2017 в 11:51
解説 (1)

私の場合、res.json()は利用可能な関数ではありませんでした。 また、もう一つの違い。 私のhttpサービスは、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 {
    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);
  }
}

... それから、AppComponentからObservableの出力を読み取ります。

constructor(private http:HttpServiceService) {    
  this.http.getDashboard().subscribe(results => this.dashboardList = results);
}
Kalamarico
編集した答え 26日 9月 2017 в 6:39
解説 (0)