Angular 5 类型"可观察<{}>"在从 API 获取数据时不可分配给类型错误

Question

我有一个返回帖子JSON数据的API。我正在尝试使用这种方法从 Angular 5 获取这些数据。

我声明了一个帖子接口

export interface Post {
userId:number;
id:number;
title:string;
body:string
}

和我的帖子.service.ts文件

import { Injectable } from '@angular/core';
import {Post} from './post';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class PostService {
private posturl = 'http://jsonplaceholder.typicode.com/posts/';
constructor(private http:HttpClient) { 
}
getData():Observable<Post[]> {
return this.http.get<Post[]>(this.posturl)
.pipe(
catchError(this.handleError())
);
}


}

但是在服务文件中，我收到以下错误。 喜欢 "Observable<{}>"不能分配给类型.....

1. 如何通过 httpclient.get 获取 JSON 数据。
2. 如何从可观察对象访问我的后期模块 ts 文件中的数据数据，该对象由 post.service.ts 的 getData 函数返回

Answer 1

您的问题在于您对 catchError 运算符的使用。但我认为你无论如何都不需要它。如果您订阅了可观察对象并发生错误，则您已经从后端收到正确的错误消息。

要从后端获取数据，请按如下方式编写方法：

public getData(): Observable<Post[]> {
return this.http.get<Post[]>(this.posturl);
}

然后，要使用这些数据，请使用返回的可观察量的订阅函数，如下所示：

this.getData().subscribe(data => this.handleData(data), error => this.handleError(error));

Answer 2

您首先需要映射响应并将其从 JSON 转换为普通的 JS/TS 对象/类。这可能看起来像这样

getData():Observable<Post[]> {
return this.http.get<Post[]>(this.posturl)
.map((resonse) => {
return response.json().map((entry): Post => {
// convert your stuff here and return proper type
const result: Post = {
userId: result.userId,
id: result.id,
title: result.title,
body: result.body,
};
return result;
})
})
.subscribe((result) => {
console.log(result);
});
}

注意：不要忘记导入地图功能

import 'rxjs/add/operator/map';

编辑：通过适当的转换更新了我的答案。对于接口，它非常简单，您甚至可以直接投射它。(我仍然更喜欢使用显式方法来确保只有正确的属性才会保留，并且不会意外传递一些不需要的属性。对于类，这甚至更好，然后您可以添加新的 Class(( 并返回它，您的响应将始终具有类。

第二个注意：这假设您的 json 结果是一个数组。否则 .json((.map(( 将无法工作，您也不需要它。我建议调试 response.json(( 以更好地了解返回的内容:)

Answer 3

Map 将创建新的可观察量，以便您可以在将响应发送到组件之前对其进行处理。您可以按如下方式处理

public getData(){
return this.http.get('http://jsonplaceholder.typicode.com/posts/')
.map((response: Response) => {
return response.json().map(this.transformData);
})
.catch((error: Response) => { return Observable.throw('Something went wrong');})
.subscribe(data => console.log(data),
(error)=> console.log('err'));
}
public transformData(r:any): Post{
let postData = <Post>({
userId : r.userId,
id: r.id,
title: r.title,
body: r.body   
});
return postData;
}

如果服务器抛出任何错误，则添加.catch，您可以使用自定义消息专门记录它。通过使用transformData()方法数据将被转换