Angular 4 错误：“() => any”类型中缺少属性“includes”

Posted 2023-03-13

【中文标题】Angular 4 错误：“() => any”类型中缺少属性“includes”

【英文标题】：Angular 4 Error : Property 'includes' is missing in type '() => any'

【发布时间】：2017-09-14 23:33:53

【问题描述】：

我在使用 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[]'。 类型“() => any”中缺少属性“includes”。

我做错了什么

我的模特

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  

【参考方案1】：

有两个问题。

首先，您不是在调用 json 响应，您只是在引用该方法。你需要把res.json改成res.json()：

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

其次，您没有为订阅结果声明类型。您应该明确指定结果的类型：

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

由于您订阅的参数是any 类型，除非您像我上面提到的那样预先指定类型，或者在赋值之前对其进行强制转换，否则打字稿编译器会告诉您类型无效。

【讨论】：

这适用于 Angular 6：this.stateService.GetStates().subscribe((states: State[]) => this.states = states);

【参考方案2】：

在我的例子中 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<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);
  

...然后我从我的 AppComponent 中读取 Observable 的输出：

constructor(private http:HttpServiceService)     
  this.http.getDashboard().subscribe(results => this.dashboardList = results);