Angular2 - не удалось получить данные из API

Question

В настоящее время я создаю приложение Angular2, использующее веб-API MVC, который я создал. Однако, похоже, он не извлекает данные. Я, очевидно, что-то пропустил, но я не уверен, что.

Я знаю, что URL-адрес, который я использую, работает вместе с заголовками, так как я могу правильно получить данные через скрипач.

Мой repack.service.ts выглядит следующим образом:

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 

import 'rxjs/add/operator/toPromise'; 

import { RepackIndex } from './RepackIndex'; 

@Injectable() 
export class RepackService{ 
    private baseUrl = 'https://localhost:44321/api/Repack/All'; 

    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http) { } 

    getAllRepacks(): Promise<RepackIndex[]>{ 
     var data = this.http.get(this.baseUrl) 
         .toPromise() 
         .then(response => response.json().data as RepackIndex[]) 
          .catch(this.handleError); 

     return data; 
    } 

    private handleError(error: any): Promise<any>{ 
     console.error("An error occured in repack.service", error); 
     return Promise.reject(error.message || error); 
    } 
} 

И это мой компонент:

import { Component, OnInit } from '@angular/core'; 
import { Router }   from '@angular/router'; 

import { RepackIndex }  from './repackIndex'; 
import { RepackService }  from './repack.service'; 

@Component({ 
    selector: 'index', 
    templateUrl: 'app/index.component.html', 
    providers: [RepackService] 
}) 

export class IndexComponent implements OnInit{ 
    repacks: RepackIndex[]; 
    selectedRepack: RepackIndex; 

    constructor(private router: Router, private repackService: RepackService) { } 

    onSelect(repack: RepackIndex): void{ 
     this.selectedRepack = repack; 
    } 

    getRepacks(): void{ 
     this.repackService.getAllRepacks().then(repacks => this.repacks =  repacks); 
    } 

    ngOnInit(): void{ 
     this.getRepacks(); 
    } 
} 

Я попытался положить в контрольной точке и добавление console.log линии, но нет данные возвращаются компоненту.

Я довольно новичок в Angular2, поэтому любая помощь будет принята с благодарностью.

Спасибо,

Answer 1

Right Мне удалось заставить его работать с использованием наблюдаемой, а не обещание.

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

public GetAll =(): Observable<RepackIndex[]> => { 
     return this.http.get(this.baseUrl) 
        .map((response: Response) => <RepackIndex[]>response.json()) 
        .catch(this.handleError); 
} 

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

getRepacks(): void{ 
     this.repackService.GetAll() 
          .subscribe((data:RepackIndex[]) => this.repacks = data, 
          error => console.log(error), 
          () => console.log('Get All repacks complete')); 
} 

Я нашел ответ here

Надеется, что это поможет кому-то else