Jak mapie obiekt odpowiedzią zwrócona przez serwis HTTP do maszynopis obiektów za pomocą obserwowalnych funkcję Mapa w Angular2

Question

Witam stworzyliśmy usługę angular2 którego zadaniem jest, aby zadzwonić do WebAPI która zwraca dane w obiekcie struktury json następująco:

//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"}] 
} 

Oto moja usługa angular2. Metody getMileStones działają doskonale i jestem w stanie obsłużyć odpowiedź z powrotem do MileStone []. Ale w celu uzyskania danych stronicowanych utworzyłem funkcję getPagedMileStones (int, int), która wywołuje metodę webapi i zwraca wynik jak wspomniano powyżej. Chcę przekazać zwróconą odpowiedź z webapi do IPagedResponse. Ale nie jestem w stanie sprawić, żeby działała poprawnie. Mam interfejs IPagedResponse i chcę, aby ta funkcja zwracała te informacje z powrotem do wywoływania komponentu, aby móc zapewnić funkcjonalność stronicowania.

   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

Czy to nie działa? Nie widzę żadnej zmiennej w kodzie, który jest rodzajem 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); 
}