Angular 5, IONIC 3 - [ts] Тип 'void' нельзя назначить типу 'Observable <Post []>' - PullRequest
Новая
       20

Angular 5, IONIC 3 - [ts] Тип 'void' нельзя назначить типу 'Observable <Post []>'

0 голосов
/ 28 апреля 2018

enter image description here

В этом уроке меня просят сопоставить с JSON, я прочитал, что Angular 5 не нужно сопоставлять с JSON. Не могу получить эту работу.

GitHub <- Файлы проекта </p> 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Post } from '../../models/posts.inteface';
import { DataProvider } from '../../providers/data/data';

@IonicPage()
@Component({
  selector: 'page-posts',
  templateUrl: 'posts.html',
})
export class PostsPage {

  posts: Observable<Array<Post>>;

  constructor(private data: DataProvider,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  getPosts() {
    this.posts =  this.data.getPosts(); // Error 
  }
}

Учебник просит меня написать так.

enter image description here

Это файл провайдера 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
/*
  Generated class for the DataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DataProvider {

  rootUrl : string = 'https://jsonplaceholder.typicode.com'

  posts:string ='posts';

  constructor(public http: HttpClient) {
    console.log('Hello DataProvider Provider');
  }

  getPosts(){
    this.http.get(`${this.rootUrl}/${this.posts}`).map(res=>res).take(1);
  }
}

Обновлено, как сказал @Prasheel, ошибка по-прежнему

enter image description here

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Если вы используете угловую 5, тогда нет необходимости использовать оператор карты. Вам просто нужно вернуть Observable следующим образом: 

 getPosts(){
   return this.http.get(`${this.rootUrl}/${this.posts}`);
  }

Это будет работать. Или же вы можете явно определить тип возвращаемого значения следующим образом: 

getPosts(): Observable<Post[]>{
       return this.http.get(`${this.rootUrl}/${this.posts}`);
      }
0 голосов
/ 28 апреля 2018

DataProvider (вам не хватает оператора return. map и take операторы ничего не делают). 

getPosts() {
   return this.http.get(`${this.rootUrl}/${this.posts}`).map(res => res).take(1);
}

Обновление 

.map(res=>res.json())

Это потому, что учебник должен быть устаревшим, res.json() были способом преобразования http response до того, как HttpClientModule вступит в игру. Сказал, что вам больше не нужно использовать map для преобразования ответа в формате json. Get запрос возвращает Observable, который завершается после получения ответа, поэтому take(1) также не требуется. 

getPosts() {
  return this.http.get(`${this.rootUrl}/${this.posts}`);
}
...