可观察< {}>不可分配给Observable< SomeType []>类型； [英] Observable<{}> not assignable to type Observable<SomeType[]>

问题描述

我正在学习Angular2和Typescript.我正在学习angular.io上的Heroes教程，但是将其应用于我从ASP.Net转换的项目中.我遇到了一个问题，我认为这是由于我缺乏理解，尽管据我所知，它与本教程相关部分的工作相符.

I'm learning Angular2 and Typescript. I'm working through the Heroes tutorial on angular.io, but applying it to a project I'm converting from ASP.Net. I've run into a problem which I think is due to my lack of understanding, though as far as I can see it matches what the relevant part of the tutorial is doing.

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

我在返回this.http.get(this.serviceUrl)"行上遇到以下错误:

I'm getting the following error on the line "return this.http.get(this.serviceUrl)":

错误:(20，16)TS2322:类型'Observable< {}>'不能分配给该类型 可观察".类型"{}"不可分配给类型 'RiskListSummary []'.类型"{}"中缺少属性长度".

Error:(20, 16) TS2322: Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'RiskListSummary[]'. Property 'length' is missing in type '{}'.

如果有所作为，我使用的是webstorm(最新版本)，但我认为此错误直接来自打字稿编译器.我在想也许我需要一个rxjs的类型文件，但是本教程不使用一个文件，而且我在类型搜索"中找到的文件都不起作用

If it makes a difference, I'm using webstorm (latest version), but I think this error is coming straight from the typescript compiler. I was thinking maybe I need a typings file for rxjs, but the tutorial doesn't use one, and none of the ones that I found with a "typings search" made a difference

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

The following are my dependencies from 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"

推荐答案

我认为您的问题位于此处:

I think that your problem is located here:

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

您可以使用仅传递function参考:

You could use just passing function reference:

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

但是这样一来，您将失去this.

but this way you will lose this.

或者您可以使用绑定保留this的方法:

Or you could use bind method to retain this:

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

但是您将丢失类型检查.

我会利用箭头函数即可使用将此词作为词法:

I would leverage arrow functions to be able to use lexical this:

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

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

Without it, the this variable will point to the function where the call is made, instead of the instance that contains getRisks().

这篇关于可观察&lt; {}&gt;不可分配给Observable&lt; SomeType []&gt;类型；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！