键入“Observable<Entity[]>”不能指定键入“Entity[]”

Question

嗨，我正在学习使用版本6的角度。我试图映射一个基本的http响应并返回到一个Observable中，但是，我得到了这个类型的转换错误。

market-data.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { MarketDataService } from "./market-data.service";
import { CoinMarketCapTokenEntity } from "../entity/coinmarketcaptoken-entity";

@Component({
    selector: "app-market-data",
    templateUrl: "./src/app/market-data.component.html"
})
export class MarketDataComponent implements OnInit {
    private _marketDataService: MarketDataService;
    private _tokens: CoinMarketCapTokenEntity[];

    constructor(marketDataService: MarketDataService) {
        this._marketDataService = marketDataService;
    }

    ngOnInit() {
        this._tokens = this._marketDataService.getCoinMarketCapTokens();
    }
}

market-data-service

import { Injectable } from "@angular/core";
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { CoinMarketCapTokenEntity } from "../entity/coinmarketcaptoken-entity";

const coinMarketcapCoinsUrl = "https://s2.coinmarketcap.com/generated/search/quick_search.json";

@Injectable()
export class MarketDataService {
    private _http: Http;

    constructor(http: Http) {
        this._http = http;
    }

    getCoinMarketCapTokens(): Observable<CoinMarketCapTokenEntity[]> {
        return this._http.get(coinMarketcapCoinsUrl, {headers: this.getHeaders()})
                               .map(this.mapTokens);
    }

    mapTokens(response: Response): CoinMarketCapTokenEntity[] {
        return response.json().map(this.toCoinMarketCapToken);
    }

    toCoinMarketCapToken(r: any): CoinMarketCapTokenEntity {
        let token = <CoinMarketCapTokenEntity>({
            name: r.name,
            symbol: r.symbol,
            rank: r.rank,
            slug: r.slug,
            tokens: r.tokens,
            id: r.id
        });
        return token;
    }

    getHeaders() {
        let headers = new Headers();
        headers.append("Accept", "application/json");
        return headers;
    }
}

我所犯的错误是

src/app/market-data.component.ts(18,9): error TS2322: Type 'Observable<CoinMarketCapTokenEntity[]>' is not assignable to type 'CoinMarketCapTokenEntity[]'.
[1]   Property 'length' is missing in type 'Observable<CoinMarketCapTokenEntity[]>'

我还检查了这里重复的问题- Observable<{}> not assignable to type Observable

然而，所有的解决办法都没有奏效。谢谢你的帮忙

Answer 1

您只需使用subscribe方法将可观察的模型转换为模型。

Answer 2

您正在混合旧版本和新版本编码风格。有几件事，您应该修改到您的代码，1。您应该使用HttpHeaders(可以从@ are /angular/http导入)而不是头文件。2.不需要像在

return this._http.get(coinMarketcapCoinsUrl, {headers: this.getHeaders()})
                           .map(this.mapTokens);

http.get()本身返回可观察的结果。为了从可观察到的地方检索数据，您可以在上面使用订阅()方法。

1. 不需要像在代码中那样，在响应时调用map。 返回response.json().map(this.toCoinMarketCapToken)； response.json()将为您提供一个承诺对象，而承诺对象没有map方法。您必须调用然后()方法从其中检索数据。

Answer 3

下面的代码可以工作。

import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
const coinMarketcapCoinsUrl = "https://s2.coinmarketcap.com/generated/search/quick_search.json";

@Injectable()
export class MarketDataService {

    constructor(private _http: HttpClient) {

    }
    getCoinMarketCapTokens(): Observable<CoinMarketCapTokenEntity[]> {
          return this._http.get<CoinMarketCapTokenEntity[]>(coinMarketcapCoinsUrl);
    }

}

export class CoinMarketCapTokenEntity{
    name;
    symbol;
    rank;
    slug;
    tokens;
    id;
}