从 API 获取数据时，Angular 5 Type 'Observable<{}>' 不可分配给类型错误答案

【问题标题】：Angular 5 Type 'Observable<{}>' is not assignable to type error while getting data from a API从 API 获取数据时，Angular 5 Type 'Observable<{}>' 不可分配给类型错误
【发布时间】：2018-10-13 10:31:24
【问题描述】：

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

我声明一个 Post 接口

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

还有我的 post.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' 不可分配给类型.....

如何通过httpclient.get获取json数据。
如何从 post.service.ts 的 getData 函数返回的 observable 对象访问我的 post 模块 ts 文件中的数据数据

【问题讨论】：

标签： angular typescript observable angular5 angular-httpclient

【解决方案1】：

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

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()方法数据将被转换

【讨论】：

【解决方案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';

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

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

【讨论】：

你能详细说明如何做到这一点吗：//在这里转换你的东西并返回正确的类型
在尝试您的解决方案时出现多个错误，我有这个提供 DATA jsonplaceholder.typicode.com/posts 的公共 API，我只想通过 Angular5、服务和组件访问数据。
@Raj 数据看起来不像 json。如果您在地图中记录响应，您的结果是什么？还有什么错误发生？

【解决方案3】：

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

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

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

然后使用这个数据使用返回的 observable 的 subscribe 函数，像这样：

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

【讨论】：