Cách ánh xạ đối tượng đáp ứng được trả về bởi Dịch vụ Http đến một đối tượng nguyên cảo sử dụng chức năng Bản đồ quan sát ở Angular2

Question

Hi Tôi đã tạo ra một dịch vụ angular2 có nhiệm vụ là để gọi một WebAPI mà trả về dữ liệu trong một cấu trúc đối tượng json như sau:

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

Đây là dịch vụ angular2 của tôi. Các phương thức getMileStones hoạt động hoàn hảo và tôi có thể truyền phản hồi trở lại MileStone []. Nhưng để có được dữ liệu phân trang, tôi đã tạo ra một hàm getPagedMileStones (int, int) gọi phương thức webapi và trả về kết quả như đã đề cập ở trên cấu trúc. Tôi muốn truyền trả lời từ webapi đến IPagedResponse. Nhưng tôi không thể làm cho nó hoạt động đúng. Tôi có một IPagedResponse giao diện và tôi muốn chức năng này trả lại thông tin này trở lại thành phần gọi điện để tôi có thể cung cấp chức năng phân trang.

   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

Điều này có hiệu quả không? Tôi không thấy bất kỳ biến trên mã của bạn đó là một loại 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); 
}