2016-08-24 18 views
23

Próbuję wykonać tutorial na temat angular.io (Tour the Heroes) Ale zamiast samouczka staram się wykonać prawdziwe żądanie GET na niektórych JSON .Angular2 - TypeError: this.http.get (...). ToPromise nie jest funkcją

Mój kod wygląda następująco:

private userUrl = 'https://jsonplaceholder.typicode.com/users'; 
    constructor(private http: Http) {} 

    getUsersHttp(): Promise<User[]> { 
    return this.http.get(this.userUrl) 
     .toPromise() 
     .then(response => response.json().data as User[]) 
     .catch(this.handleError); 
    } 

Aby obsługiwać importować tylko kilka podstawowych rzeczy:

import { Injectable }  from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 
import { User } from './user'; 

Gdzie user.ts jest w zasadzie kopię heroe.ts w TOH tak:

export class User { 
    id: number; 
    name: string; 
} 

Jak nazywam tę konkretną metodę w usłudze: Po pierwsze Staram się wiele rzeczy, ale podczas debugowania próbuję tylko console.log go tak:

console.log(this.userService.getUsersHttp()); 

Gdy strona się ładuje w konsoli znalazłem kilka błędów: Pierwszy z nich to:

EXCEPTION: TypeError: this.http.get(...).toPromise is not a function

drugi jest:

EXCEPTION: TypeError: this.http.get(...).toPromise is not a functionBrowserDomAdapter.logError @

Obsługa samodzielnie wygląda dobrze. Dodałem moją usługę app.module.ts w tej linii:

providers: [ HTTP_PROVIDERS, UserService ] 

i to działa, jeśli bezpośrednio zwrócić dane z niektórych funkcji, takich jak (i ​​wykomentuj nazywając getUsertHttp funkcji):

getUsers() { 
    return [{'id': 1, 'name': 'User1'}, {'id': 2, 'name': 'User2'}]; 
    } 

Staram się opisać wszystko co może być ważne, przepraszam, jeśli pytanie jest trochę za długie. Proszę, dajcie mi znać, co robię źle?

+0

także można wkleić index.html i main.ts? Może brakuje core-js lub es6-shim w polyfill. –

Odpowiedz

75

Wygląda brakuje import:

import 'rxjs/add/operator/toPromise';

+0

Witam @Stefan Svrkota, miałeś rację, przegapiłem ten import. Zaznaczę twoje pytanie jako poprawne, ale może jakaś wskazówka, dlaczego 'this.httpUsers' jest undifined? 'this.userService .getUsersHttp() .then (użytkowników => this.httpUsers = użytkowników) .catch (błąd => this.error = błąd);' – Andurit

+2

https://jsonplaceholder.typicode.com/users zwraca tablicę json, a nie obiekt, który miałby element .data –

+0

Dziękuję wam obu, Philippe miał rację, – Andurit

Powiązane problemy