Angular 类型'；可观察<；实体[]>'；不可分配给类型'；实体[]和#x27；

大家好，我正在学习第6版。我试图映射一个基本的http响应并返回一个

可观察的
，但是，我得到了这种类型的转换错误

市场数据.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;
    }
}

从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Http，Response，Headers}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
从“./实体/coinmarketcaptoken实体”导入{CoinMarketCapTokenEntity}；
const coinMarketcapCoinsUrl=”https://s2.coinmarketcap.com/generated/search/quick_search.json";
@可注射（）
导出类MarketDataService{
私有http:http；
构造函数（http:http）{
这是http=http；
}
getCoinMarketCapTokens（）：可观察{
返回此。\u http.get（coinMarketcapCoinsUrl，{headers:this.getHeaders（）}）
.map（此.maptokes）；
}
mapTokens（响应：响应）：CoinMarketCaptokenity[]{
返回response.json（）.map（this.toCoinMarketCapToken）；
}
toCoinMarketCapToken（r:any）：CoinMarketCaptokenity{
让令牌=({
姓名：r.name，
符号：r.symbol，
等级：r.rank，
鼻涕虫：鼻涕虫，
代币：r.代币，
id:r.id
});
返回令牌；
}
getHeaders（）{
let headers=新的headers（）；
headers.append（“接受”、“应用程序/json”）；
返回标题；
}
}

我犯的错误是

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

src/app/market data.component.ts（18,9）：错误TS2322:类型“Observable”不可分配给类型“CoinMarketCaptokenity[]”。
[1] 类型“Observable”中缺少属性“length”

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

然而，所有的解决方案都不起作用。感谢您的帮助
您只需使用
subscribe
方法将可观测模型转换为您的模型
 您只需使用
subscribe
方法将可观测模型转换为您的模型
 您混合了旧版本和新版本的编码风格。有几件事，你应该改变你的代码，
1.您应该使用HttpHeaders（可以从@angular/common/http导入）而不是headers。
2.不需要像在中那样在web服务响应时调用map

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

get（）本身返回可观察的。要从Observable中检索数据，可以对其使用subscribe（）方法

不需要像在代码中那样在响应时调用map

返回response.json（）.map（this.toCoinMarketCapToken）

json（）将为您提供一个Promise对象，而Promise对象没有map方法。必须调用then（）方法从中检索数据

您混合了旧版本和新版本的编码风格。有几件事，你应该改变你的代码，
1.您应该使用HttpHeaders（可以从@angular/common/http导入）而不是headers。
2.不需要像在中那样在web服务响应时调用map

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

get（）本身返回可观察的。要从Observable中检索数据，可以对其使用subscribe（）方法

不需要像在代码中那样在响应时调用map

返回response.json（）.map（this.toCoinMarketCapToken）

json（）将为您提供一个Promise对象，而Promise对象没有map方法。必须调用then（）方法从中检索数据

下面的代码可以工作

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

从“@angular/core”导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
const coinMarketcapCoinsUrl=”https://s2.coinmarketcap.com/generated/search/quick_search.json";
@可注射（）
导出类MarketDataService{
构造函数（私有的http:HttpClient）{
}
getCoinMarketCapTokens（）：可观察{
返回此信息。_http.get（coinMarketcapCoinsUrl）；
}
}
导出类CoinMarketCaptokenity{
名称
象征；
等级
鼻涕虫
代币；
身份证件
}
以下代码有效

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

从“@angular/core”导入{Injectable}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
const coinMarketcapCoinsUrl=”https://s2.coinmarketcap.com/generated/search/quick_search.json";
@可注射（）
导出类MarketDataService{
构造函数（私有的http:HttpClient）{
}
getCoinMarketCapTokens（）：可观察{
返回此信息。_http.get（coinMarketcapCoinsUrl）；
}
}
导出类CoinMarketCaptokenity{
名称
象征；
等级
鼻涕虫
代币；
身份证件
}
Share
market data.component.ts
，您可能已经为您添加的
CoinMarketCaptokenity[]
resultI指定了可观察类型。我的缺点是，这个问题来自
市场数据.component
我猜share
市场数据.component.ts
，可能您已经为您添加的
CoinMarketCaptokenty[]
结果分配了一个可观察类型。我的缺点是，问题来自
市场数据。组件
我想是的，我忽略了问题是从组件方面发生的这一事实。谢谢是的，我忽略了问题发生在组件方面的事实。谢谢哦，酷！我不知道这件事。网上有很多关于angular的例子，所以很难找到最新的。让我马上试试这个，你可以参考，它将帮助你处理从你的Web服务收到的数据。哦，酷！我不知道这件事。网上有很多关于angular的例子，所以很难找到最新的。让我马上试试这个，你可以参考，它将帮助你处理从你的Web服务接收到的数据。欢迎使用堆栈溢出！请不要把你的源代码扔在这里。要和蔼可亲，试着对你的答案做出一个很好的描述，这样别人就会喜欢你的答案