时间戳

首页 > 解决方案 > IHttpPromise<{}>，可观察的如何使它在http调用中工作？

angularjs - IHttpPromise<{}>，可观察的如何使它在http调用中工作？

问题描述

我正在为 AngularJS、TypeScript 和 RxJs 苦苦挣扎。

我使用 rxJs 在组件拱门中使用 Typescript 进行编码。但它仍然是 AngularJs ;)

我已经将带有 id、brand 和 model 字段的接口 Car 定义为与 API 匹配的字符串。

现在我正在对 rest API 进行 HTTP 调用，当我尝试使用该接口定义类型时，它给了我一个错误。我不知道我做错了什么。也许太多的Angular 6方式。

我有一个变量

public cars$: Observable<Car[]>;

现在在构造函数中，我正在尝试从 API 获取汽车...

this.cars$ = fromPromise(this.$http.get('http://...someurl...')).pipe(map((data: IHttpResponse<{}>) => data));

我应该如何更改data: IHttpResponse<{}>线路以使其与 Car 类型一起使用？

我已经尝试了几十种变化并得到一个错误

“类型 Observable 不可分配给类型 Observable<{}>” “参数不可分配给参数” “源和源的类型不兼容”...

我究竟做错了什么？

标签： angularjstypescriptrxjs

解决方案

查看IHttpResponse的类型定义

interface IHttpResponse<T> {
    data: T;
    status: number;
    headers: IHttpHeadersGetter;
    config: IRequestConfig;
    statusText: string;
    /** Added in AngularJS 1.6.6 */
    xhrStatus: 'complete' | 'error' | 'timeout' | 'abort';
}

我们看到它将有一个data类型为 T 的成员。我们可以通过将类型放在菱形<>中来告诉 typescript T 是什么

IHttpResponse<Car[]>

用我们接口的类型替换泛型现在看起来像这样

interface IHttpResponse {
    data: Car[];
    status: number;
    headers: IHttpHeadersGetter;
    config: IRequestConfig;
    statusText: string;
    /** Added in AngularJS 1.6.6 */
    xhrStatus: 'complete' | 'error' | 'timeout' | 'abort';
}

所以我们希望我们的函数看起来像这样：

(response: IHttpResponse<Car[]>) =>{ 
    //looking at the above interface we see that response.data is now Car[];
    const carArray:Car[] = response.data 
    return carArray;
}

Map 返回我们返回的 Observable，因此它将与您的变量声明相匹配cars$: Observable<Car[]>;

fromPromise()我怀疑在调用和传入get时类型信息丢失了。尝试提供 fromPromise 类型信息

fromPromise(this.$http.get<Car[]>('http://...someurl...'))

推荐阅读