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"

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

但是你会丢失类型检查.

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

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

没有它将this指向进行调用的函数.

Answer 2

我遇到了同样的问题，但是无论我如何如上所述进行更改，它仍然无法正常工作。在我的大学找到这张地图之前，请按照VSC的提示进行定位

所以适当的更改应该像（添加类型强制转换到以下位置）

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

我是TypeScript的新手。所以这种[方法签名]确实给了我一把锤头:(

但是最后它解决了:)