类型 'Observable<Entity[]>' 不可分配给类型 'Entity[]'

Question

你好，我正在学习 angular 版本 6。我正在尝试映射一个基本的 http 响应和 return 在 Observable 中，但是，我得到了这种类型转换错误。

市场-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();
    }
}

市场数据服务

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[]>'

我在这里也检查了重复的问题 -

但是 none 的解决方案有效。感谢您的帮助

Answer 1

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

Answer 2

您正在混合使用旧版本和新版本的编码风格。有几件事，你应该改变你的代码， 1. 你应该使用 HttpHeaders（可以从@angular/common/http 导入）而不是 headers。 2. 无需像在

中那样根据 Web 服务的响应调用地图

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

http.get() 本身 returns 可观察。要从 Observable 中检索数据，您可以在其上使用 subscribe() 方法。

无需像您在代码中那样在响应时调用地图

return response.json().map(this.toCoinMarketCapToken);

response.json() 会给你一个 Promise object，而 Promise object 没有 map 方法。您必须调用 then() 方法才能从中检索数据。

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

类型 'Observable<Entity[]>' 不可分配给类型 'Entity[]'

Type 'Observable<Entity[]>' is not assignable to type 'Entity[]'

typescript

systemjs

angular2-observables

angular