Angular2 - 無法從API檢索數據

我目前正在構建一個訪問我構建的MVC Web API的Angular2應用程序。但是，它似乎沒有檢索任何數據。我明顯錯過了一些東西，但我不確定是什麼。Angular2 - 無法從API檢索數據

我知道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所以任何幫助將不勝感激。

感謝，

來源

2016-09-21 DaRoGa

你好嗎確定'https：// localhost：44321/api/Repack/All'返回正確的結果？ –

是像我說我在嘗試小提琴手確切的網址（複製和粘貼），它返回成功 – DaRoGa

對不起，錯過了一部分:) –

右鍵我設法得到它通過使用可觀察到的，而不是一個承諾工作。

我的服務方法現在看起來是這樣的：

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

希望這可以幫助別人否則

來源

2016-09-21 10:55:22 DaRoGa

Angular2 - 無法從API檢索數據

回答

相關問題