Question

我有一个返回帖子的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())
          );

      }




}

但在服务文件中我收到以下错误。喜欢＆＃39;可观察＆LT; {}＆GT;＆＃39;不能分配给类型.....

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

Answer 1

您的问题在于您使用了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));

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

编辑：通过正确的转换更新了我的答案。对于Interfaces来说，它非常简单，您甚至可以直接投射它。（我仍然更喜欢使用显式方法来确保只保留正确的属性，而不是偶然传递一些不需要的东西。对于类更好，然后你可以添加新的Class（）并返回它，你的响应将始终有类

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

Answer 3

Map将创建新的observable，以便您可以在将响应发送到组件之前处理该响应。您可以按照以下步骤进行处理

//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap-sprockets
//= require_tree .

如果服务器抛出任何错误，则会添加

.catch，您可以使用自定义消息专门记录它。通过使用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; }方法，数据将被转换

Angular 5 Type＆＃39; Observable＆lt; {}＆gt;＆＃39;从API

3 个答案: