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

我在该行上收到以下错误＆＃34;返回this.http.get（this.serviceUrl）＆＃34;：

错误：（20,16）TS2322：输入＆＃39; Observable＆lt; {}＆gt;＆＃39;不能分配给类型＆＃39;可观察＆＃39 ;.输入＆＃39; {}＆＃39;不能分配给类型＆＃39; RiskListSummary []＆＃39 ;.物业长度＆＃39;类型＆＃39; {}＆＃39;。
中缺少

如果它有所作为，我使用webstorm（最新版本），但我认为这个错误直接来自typescript编译器。我想也许我需要一个rxjs的打字文件，但是教程并没有使用一个，而且我找不到一个＆＃34;类型搜索＆＃34;有所作为

以下是我对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));
}

但是你会lose type checking。

我会利用arrow函数来使用lexical this：

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

没有它this将指向调用的函数。

Answer 2

我有同样的问题，但无论我如何改变如上所述，它仍然无法正常工作。直到我的大学找到这个map, catch defination as VSC prompted

所以正确的改变应该是（添加类型转换为以下位置）

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

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

但最终它成功了：）

Answer 3

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

Answer 4

我发现了下一个：AccessTokens丢失了。因此，我进行了更改，并且有效：在您的模型上（以我的国家（地区）为例），编辑文件并更改为：

export interface CountryInterface {
  "id"?: any;
  "name": string;
  "order"?: number;  
}

export class Country implements CountryInterface {
  "id": any;
  "name": string;
  "order": number;
   ....
}

收件人：

export interface CountryInterface {
  "id"?: any;
  "name": string;
  "order"?: number;
  accessTokens: any[];
}

export class Country implements CountryInterface {
  "id": any;
  "name": string;
  "order": number;
  accessTokens: any[];
  ...
}

Answer 5

Typescript是一个编译器工具，它总是会给出类型检查编译错误，因为在这种情况下，getRisk方法应该指定它返回类型为RiskListSummary的Observable，以便该工具应该识别出此方法的预期内容并且将会在订阅方法中使用时检查类型安全性。

可观察到的与LT; {}＆GT;不能分配给Observable <sometype []>类型

5 个答案: