Gözlemlenebilir <{}> Gözlemlenecek öğe yok atanabilir <SomeType[]>

Question

Angular2 ve Typescript'i öğreniyorum. Ben angular.io üzerinde Heroes öğretici üzerinden çalışıyorum, ancak ASP.Net'ten dönüştürdüğüm bir projeye uygularım. Öğretmenin ilgili bölümünün ne ile eşleştiğini görebildiğim kadarıyla benim anlayış eksikliğimden kaynaklandığını düşündüğüm bir soruna girdim.

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

ben "this.http.get (this.serviceUrl) return" satırında aşağıdaki hatayı alıyorum

:

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 '{}'.

olsun, hani WebStorm kullanıyorum bir fark yaparsa (En son sürüm), ama bence bu hata düz metin derleyicisinden geliyor. Belki de rxjs için bir yazım dosyasına ihtiyacım vardı, ama öğretici bir tane kullanmıyor ve bir "yazarak arama" ile bulduğumların hiçbiri bir fark yaratmadı

Aşağıdakiler paketten bağımlılığım. 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

Ben senin sorunun burada yer olduğunu düşünüyorum

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

ama bu yolu this kaybedersiniz.

Yoksa this korumak için bind yöntemi kullanabilirsiniz:

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

ancak lose type checking olacak.

Ben lexical this kullanmak mümkün arrow fonksiyonları kaldıraç olacaktır: o this olmadan

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

çağrı yapıldığında işlevine işaret edecektir.

Answer 2

getRisks() fn göre, Observable<RiskListSummary[]> dönmek türleridir. Ancak kodunuzda body.data || {} döndürüyorsunuz. RiskListSummary [] 'ı body.data'nıza bağlamanız gerektiğine inanıyorum.

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

sadece function referans geçen kullanabilirsiniz:

Answer 3

Aynı problemi yaşadım, ancak yukarıda değinildiği gibi değişmiş olmama rağmen, hala çalışmıyor. üniversite bu map, catch defination as VSC prompted

bulana kadar bu kadar doğru değişim gibi olmak

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

Ben typescript yeni am (türü aşağıdaki yer dökme ekleyin) gerekir.böylece

Answer 4

typescript hep burada olduğu gibi tip onay derleme hatası verecek bir derleyici aracıdır :) [yöntem imzası] bu tür gerçekten bana kafa :(

üzerine bir çekiç vermek Fakat nihayet çalıştı Bu durum getRisk yönteminin geri döndüğünü belirtmelidir RiskListSummary türünde, böylece aracın bu yöntemden ne beklendiğini algılaması ve abone yönteminde kullanıldığında tür güvenliğini kontrol etmesi gerekir.