Observable<{}> 不可分配给类型 Observable<SomeType\[\]>

Question

我正在学习 Angular2 和 Typescript。我正在研究 angular.io 上的 Heroes 教程，但将其应用于我从 ASP.Net 转换的项目。我遇到了一个问题，我认为这是由于我缺乏理解，但据我所知，它与教程的相关部分正在做的事情相匹配。

 import { Injectable } from '@angular/core';
import {RiskListSummary} from '../Models/RiskListSummary';
import { Observable } from 'rxjs/Rx';
import { Http, Response } from '@angular/http';

@Injectable()
export class RiskAssessmentListService {

    constructor(private http : Http) {}

    private serviceUrl = "http://myserviceurl/";

    getRisks(): Observable<RiskListSummary[]> {
        return this.http.get(this.serviceUrl)
            .map(this.extractData())
            .catch(this.handleError());
    }

    private extractData(res: Response) {
       if (res.status < 200 || res.status >= 300) {
             throw new Error('Bad response status: ' + res.status);
           }
       let body = res.json();
       return body.data || { };
    }

    private handleError (error: any) {
        let errMsg = error.message || 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

我在“return this.http.get(this.serviceUrl)”行收到以下错误：

错误：(20, 16) TS2322：类型“Observable<{}>”不可分配给类型“Observable”。类型“{}”不可分配给类型“RiskListSummary[]”。类型“{}”中缺少属性“长度”。

如果它有所作为，我正在使用 webstorm（最新版本），但我认为这个错误直接来自 typescript 编译器。我在想也许我需要一个 rxjs 的类型文件，但本教程没有使用一个，而且我通过“类型搜索”找到的文件都没有产生任何影响

以下是我对 package.json 的依赖：

   "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"

原文由 Kevin O‘Donovan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您的问题出在此处：

 getRisks(): Observable<RiskListSummary[]> {
  return this.http.get(this.serviceUrl)
     .map(this.extractData()) <== passing result of function
     .catch(this.handleError()); <== passing result of function
}

您可以只使用传递 function 参考：

 getRisks(): Observable<RiskListSummary[]> {
  return this.http.get(this.serviceUrl)
     .map(this.extractData)
     .catch(this.handleError);
}

但这样你会失去 this 。

或者你可以使用 bind 方法来保留 this ：

 getRisks(): Observable<RiskListSummary[]> {
  return this.http.get(this.serviceUrl)
    .map(this.extractData.bind(this))
    .catch(this.handleError.bind(this));
}

但是你会 失去类型检查。

我会利用 箭头 函数来使用 词法 this ：

 getRisks(): Observable<RiskListSummary[]> {
  return this.http.get(this.serviceUrl)
    .map(res => this.extractData(res))
    .catch(err => this.handleError(err));
}

没有它， this 变量将指向进行调用的函数，而不是包含 getRisks() 的实例。

原文由 yurzui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 getRisks() fn，您是要返回的类型 Observable<RiskListSummary[]> 。但是在您的代码中，您将返回 body.data || {} 。我相信您需要将您的 RiskListSummary[] 连接到您的 body.data。

原文由 Sean Larkin 发布，翻译遵循 CC BY-SA 3.0 许可协议