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

Question

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

我声明了一个Post接口(interface)

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<{}>”不可分配给类型......

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

Answer 1

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

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

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

然后要使用此数据，请使用返回的可观察对象的订阅函数，如下所示:

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