API在Angular中的空迴應

Question

學習Angular 2並使用.Net Core構建應用程序
我有一個API，將json響應傳遞給客戶端。在我的Angular2服務中，使用Observable來讀取響應並將其傳遞給我的component，然後傳遞給view。
測試PostMan和我的API是響應預期輸出。我確定該服務存在一些需要時間解決的問題。

API：

[HttpGet] 
    public List<MovieFields> Get() 
    { 
     path += @"\Data\MovieSource.json"; 
     string jsonSource = System.IO.File.ReadAllText(path); 
     List<MovieFields> source = JsonConvert.DeserializeObject<List<MovieFields>>(jsonSource); 
     return source; 
    } 

的Json C＃類：

public class MovieFields 
{ 
    public string Id { get; set; } 
    public string Title { get; set; } 
} 

服務：

export class MoviesService{ 

constructor(private http: Http) { 
} 

getMovies() { 
    return this.http.get('api/Movies') 
     .map(res => <Array<MovieProperties>>res.json()); 
} 

}

組件：

export class AllMoviesComponent implements OnInit { 

private movieProp: Array<MovieProperties>; 
ngOnInit() { 
    this.moviesService.getMovies() 
     .subscribe(ban => this.movieProp = ban); 
} 

角JSON介面：

export interface MovieProperties {  
Id: string; 
Title: string; 

}

，最後我的JSON：

[ 
{ 
    "Id": "1", 
    "Title": "Olympus Has Fallen" 
}, 
{ 
    "Id": "2", 
    "Title": "Man of Steel" 
} ] 

答：編輯我service如下

getMovies(): Observable<MovieProperties[]> { 

    return this.http.get('api/Movies') 
     .map(this.extractData) 
     .catch(this.handleErrors); 
} 
private extractData(res: Response) { 
    let data = res.json(); 
    return data; 
} 

感謝Sajeetharan

Answer 1

你裏面的服務方法應該是這樣的，

getMovies() : Observable<MovieProperties[]>{ 
    return this._http.get('api/Movies') 
     .map((response: Response) => <MovieProperties[]>response.json()) 
     .catch(this.handleError); 
} 

private handleError(error: Response){ 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
}