Angular 4/5中HttpClient的get请求如何返回正确的Event类型对象

这个报错的核心逻辑其实很直白：你的EventService.query()方法声明返回的是单个Event对象的Observable，但组件里的events变量是Event[]数组类型，而你的API接口http://localhost:3000/events显然返回的是多个演唱会活动的数组，类型完全不匹配，所以TypeScript抛出了这个错误。

下面是具体的修复步骤：

1. 修正EventService中的query方法 #

我们需要把query()的返回类型从Observable<Event>改成Observable<Event[]>，同时调整响应处理逻辑（还可以利用HttpClient的泛型特性简化代码）：

修改后的event.service.ts：

import { Injectable } from '@angular/core';
import { Event } from './event';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// 删掉不需要的旧Http Response导入，HttpClient不需要它
// import { Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EventService {
  private apiUrl = 'http://localhost:3000/events';
  constructor(private http: HttpClient) {}

  // 把返回类型改为Observable<Event[]>，对应API返回的数组数据
  query(): Observable<Event[]>{
    // 方式一：利用HttpClient泛型直接指定返回类型，无需额外map转换
    return this.http.get<Event[]>(this.apiUrl);
    
    // 方式二：如果偏好使用map，就把响应断言成Event数组
    // return this.http.get(this.apiUrl).map(item => item as Event[]);
  }

  get(id: number): Observable<Event>{
    return null;
  }

  save(event: Event): Observable<Event>{
    return this.http.post<Event>(this.apiUrl, event);
  }

  delete(event: Event): Observable<Event>{
    return this.http.delete<Event>(this.apiUrl + '/' + event.id);
  }

  update(event: Event): Observable<Event>{
    return null;
  }
}

2. 组件逻辑无需额外修改 #

现在EventIndexComponent里的getEvents()方法中，subscribe接收到的events已经是Event[]类型，和this.events: Event[]完全兼容，报错会自动消失：

getEvents(){
  this.eventService.query().subscribe(
    events => {
      this.events = events; // 现在类型完全匹配，不会再报错
    }, err => {
      console.log(err);
    }
  )
}

额外小提示：关于HttpClient的特性 #

你之前提到参考Codecraft写法时遇到res没有.json()、results等方法，这是因为你用的是Angular的HttpClient（新的HTTP客户端），而旧的Http模块才需要调用.json()提取响应体。HttpClient会自动解析JSON响应并直接返回响应体，所以不需要额外处理那些方法~

内容的提问来源于stack exchange，提问作者Mike Glaz