Как Карта объекта Response возвращенного Http служба машинописи объекты с использованием Observable функции Map в Angular2

Question

Привета я создал службу angular2, задача которого является вызов WebAPI, который возвращает данные в структуре объекта JSon следующим образом:

//Result of the webapi service call. 
{ 
    "Total":11, 
    "Data":[{"Id":1,"Name":"A","StartDate":"2016-01-01T00:00:00"}, 
    {"Id":2,"Name":"B","StartDate":"2016-02-01T00:00:00"}] 
} 

Вот моя услуга angular2. Методы getMileStones отлично работают , и я могу отдать ответ обратно в MileStone []. Но для того, чтобы получить выгружаемые данные, я создал функцию getPagedMileStones (int, int), которая вызывает метод webapi и возвращает результат, как указано выше. Я хочу передать возвращенный ответ от webapi в IPagedResponse. Но я не могу заставить его работать правильно. У меня есть интерфейс IPagedResponse, и я хочу, чтобы эта функция возвращала эту информацию обратно на вызов компонента, чтобы я мог обеспечить функциональность подкачки.

   import { MileStoneModel} from './milestoneModel' 
       import { Http, Response, Headers, RequestOptions } from '@angular/http' 
       import { Injectable } from '@angular/core' 
       import { Observable }  from 'rxjs/Observable'; 

       import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination'; 
       import 'rxjs/Rx'; 

       export interface IPagedResponse<T> { 
        total: number; 
        data: T[]; 
       } 

       export interface DataModel { 
        id: number; 
        data: string; 
       } 

       @Injectable() 
       export class MileStoneService //implements IPagedResponse<MileStoneModel> 
       { 

        data: MileStoneModel[]; 
        //private _page: number = 1; 
        total: number; 

        private pagedResult: IPagedResponse<MileStoneModel>; 

        mileStones: MileStoneModel[] 
        private url: string = "http://localhost/ControlSubmissionApi/api/Milestones"; 
        constructor(private http: Http) { 


        } 
        getMilestones(): Observable< MileStoneModel[]> { 

         return this.http.get(this.url) 
          .map((response: Response) => <MileStoneModel[]>response.json())    
          .catch(this.handleError); 


        } 
     ***getTypedPagedMilestones(page: number, pageSize: number) { 
         debugger; 
         return this.http.get(this.url + "/" + page + "/" + pageSize) 
          .map((res: Response) => { this.data = <MileStoneModel[]>res.json().Data; this.total = res.json().Total; }) 
          //.map((Data, Total) => { console.log(Data); console.log(Total); })*** 
          .catch(this.handleError); 


        } 

        getMilestone(id: number):Observable< MileStoneModel> { 

         return this.http.get(this.url+"/"+id) 
          .map((response: Response) => <MileStoneModel>response.json()) 
          .catch(this.handleError); 

        } 
        searchMileStones(name: string): Observable<MileStoneModel[]> { 
         let headers = new Headers({ 'Content-Type': 'application/json' }); 
         let options = new RequestOptions({ headers: headers }); 
         return this.http.get(this.url+"/search/"+name) 
          .map((response: Response) => <MileStoneModel[]>response.json()) 
          .catch(this.handleError); 
        } 
        addMileStone(formdata:string) { 
         //let body = JSON.stringify({ newMileStone }); 
         let headers = new Headers({ 'Content-Type': 'application/json' }); 
         let options = new RequestOptions({ headers: headers }); 

         return this.http.post(this.url, formdata, options) 
          .map((response: Response) => <MileStoneModel>response.json())   
          .catch(this.handleError); 

        } 
        private handleError(error: any) { 
         // In a real world app, we might use a remote logging infrastructure 
         // We'd also dig deeper into the error to get a better message 
         let errMsg = (error.message) ? error.message : 
          error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
         console.log(errMsg); // log to console instead 
         return Observable.throw(errMsg); 
        } 

       } 

Answer 1

Не так ли? Я не вижу никакой переменной на ваш код, который является типом IPagedResponse

pageResponse: IPagedResponse<MileStoneModel>; 

    getTypedPagedMilstones(page: number, pageSize: number): Observable<IPagedResponse<MileStoneModel>> { 
     return this.http.get(this.url + "/" + "/" + pageSize) 
      .map((res: Response) => { 
       this.pageResponse.data = <MileStoneModel[]>res.json(); 
       this.pageResponse.total = res.json().Total; 
      }) 
      .catch(this.handleError); 
    } 

Answer 2

getPagedMilestones(page: number, pageSize: number): Observable<IPagedResponse<MileStoneModel>> { 

    return this.http.get(this.url + "/" + page + "/" + pageSize) 
     .map((response: Response) => { 
      return { 
       data: <MileStoneModel[]>response.json().Data, 
       total: response.json().Total 
      } 
     }) 
     .catch(this.handleError); 
}