Angular 5 Type 'Observable <{}>' нельзя назначить для ошибки типа при получении данных из API - PullRequest
Новая
       37

Angular 5 Type 'Observable <{}>' нельзя назначить для ошибки типа при получении данных из API

0 голосов
/ 03 мая 2018

У меня есть API, который возвращает данные JSON сообщений. Я пытаюсь получить эти данные из 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 <{}>' нельзя назначить типу .....

  1. как получить данные json через httpclient.get.
  2. Как я могу получить доступ к данным в файле TS моего модуля post из наблюдаемого объекта, который возвращается функцией getData файла post.service.ts

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Ваша проблема связана с использованием вами оператора catchError. Но я все равно не думаю, что тебе это нужно. Если вы подпишетесь на Observable и произойдет ошибка, вы уже получите правильное сообщение об ошибке от бэкэнда.

Чтобы получить данные из вашего бэкэнда, напишите ваш метод следующим образом: 

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

Затем, чтобы использовать эти данные, используйте функцию подписки возвращаемой наблюдаемой, например: 

this.getData().subscribe(data => this.handleData(data), error => this.handleError(error));
0 голосов
/ 05 мая 2018

Карта создаст новую наблюдаемую, так что вы можете обработать ответ перед отправкой его компоненту. Вы можете обработать следующим образом 

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() данные будут преобразованы

0 голосов
/ 03 мая 2018

Сначала необходимо отобразить ответ и преобразовать его из 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 (), чтобы лучше понять, что возвращается:)

...