//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);
                    }

                }