首页 文章

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

提问于
浏览 次
2

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

3 回答

  • 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));
    回复于
  • 0

    首先需要映射响应并将其从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);
        });
}

    注意：不要忘记导入 Map 功能

    import 'rxjs/add/operator/map';

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

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

    回复于
  • 0

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

    回复于

相关问题