web-dev-qa-db-fra.com

Comment mapper un objet Response renvoyé par le service Http à un objet TypeScript à l'aide de la fonction de carte observable dans Angular2

Salut, j'ai créé un service angular2 dont la tâche est d'appeler une webapi qui renvoie des données dans une structure d'objet json comme suit:

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

Voici mon service angular2. Les méthodes getMileStones fonctionnent parfaitement et je peux restituer la réponse à MileStone []. Mais afin d'obtenir les données paginées, j'ai créé une fonction getPagedMileStones (int, int) qui appelle une méthode webapi et retourne le résultat comme mentionné ci-dessus. Je veux convertir la réponse retournée de webapi en IPagedResponse. Mais je ne suis pas en mesure de le faire fonctionner correctement. J'ai une interface IPagedResponse et je veux que cette fonction renvoie ces informations au composant appelant afin que je puisse fournir une fonctionnalité de pagination.

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


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

        }

        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);
        }
    }
angulartypescriptrxjsangular2-http
10
Yashveer Singh

Cela ne fonctionnerait-il pas? Je ne vois aucune variable sur votre code qui est un type de 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);
    }
14
penleychan
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);
}
3
Yashveer Singh