データがオブジェクトの配列に変換された要求

Question

リクエストを実行してObservableを正しく返しますが、これらの返されたオブジェクトをSetor型にしたいのですが、私はServiceBaseを渡す際に汎用メソッドを実行していますジェネリックスを介して返されるオブジェクトのタイプ。

Setorクラス：

import { UUID } from 'angular2-uuid' 

export class Setor { 
    descricao: string; 
    id: UUID; 
} 

setor.component.ts：

import { element } from 'protractor'; 
import { Component, OnInit } from '@angular/core'; 

import { SetorService } from './service/setor.service'; 
import { Setor } from "app/retaguarda/setor/model/setor"; 

@Component({ 
    selector: 'app-setor', 
    templateUrl: './setor.component.html', 
    styleUrls: ['./setor.component.css'] 
}) 

export class SetorComponent implements OnInit { 

    setor: Setor; 

    private setores: Setor[]; // Lista de setores 

    constructor(public setorService: SetorService) { 
    } 

    ngOnInit() { 
    this.setor = new Setor(); 
    } 

    obterTodos(form) { 
    let t = this.setorService.obterSetores().subscribe(setores => this.setores = setores); 
     console.log(t); 
    } 
} 

setor.service.ts：

import { Observable } from 'rxjs/Observable'; 
import { BaseService } from './../../../shared/service/base/base.service'; 
import { Injectable } from '@angular/core'; 
import { Setor } from "app/retaguarda/setor/model/setor"; 
import { Http } from "@angular/http"; 

@Injectable() 
export class SetorService extends BaseService { 

    uriApi: string = 'setor'; 

    constructor(httpService: Http) { 
    super(httpService); 
    } 

    obterSetores(): Observable<Setor[]> { 
    return this.obterTodos<Setor>('setor'); 
    } 
} 

base.service.ts：

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

// Observable class extensions 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs' 

// Observable operators 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/switchMap'; 

@Injectable() 
export class BaseService { 

    serviceUrl: string = 'http://localhost:5780/api/'; 
    headers: Headers; 
    options: RequestOptions 

    constructor(private httpService: Http) { 
    this.headers = new Headers({ 
     'Content-Type': 'application/json', 
     'Accept': 'q=0.8;application/json;q=0.9' 
    }); 
    this.options = new RequestOptions({ headers: this.headers }); 
    } 

    private getAll<T>(url: string): Observable<T[]> { 
    return this.httpService 
     .get(url) 
     .map(res => res.json() as T[]) 
     .catch(this.handleError); 
    } 

    protected obterTodos<T>(url: string): Observable<T[]> { 
    return this.getAll(this.serviceUrl + url); 
    } 

    private post<T>(url: string, data: T): Observable<T> { 
    let jsonContent = JSON.stringify(data); 
    return this.httpService 
     .post(url, jsonContent, this.options) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    private extractData<T>(res: Response) { 
    let body = res.json() as any; 
    return body || {}; 
    } 

    private handleError(error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 
} 

JSONが返さ：

[ 
     { 
     "Descricao": "teste 1", 
     "Id": "4b78ade1-39a1-11e7-a8f1-a41f72fdda5d" 
     }, 
     { 
     "Descricao": "teste 2", 
     "Id": "4b7cb16f-39a1-11e7-a8f1-a41f72fdda5d" 
     }, 
     { 
     "Descricao": "teste 3", 
     "Id": "4b807449-39a1-11e7-a8f1-a41f72fdda5d" 
     } 
    ] 

をJSONでの復帰がSetorクラスのdeserializableになるように欠けている何か？

Answer 1

クラスを使用したい場合まず、Setorという新しいオブジェクトにマップできるように、この場合はクラスにコンストラクタを追加する必要があります。

export class Setor { 
    constructor(
    public descricao: string; 
    public id: UUID; 
) {} 
} 

その後、我々はそうでない場合、我々は、明示的にプロパティを記述することなく、Object.assignを使用することができ、プロパティが一致していないので、あなたの応答から各Setorをマップする必要があります。ほとんどはそれを行う必要があります

obterSetores(): Observable<Setor[]> { 
    return this.obterTodos<Setor>() 
    .map(res => res.map(x => new Setor(x.Descricao, x.Id))) 
} 

:)

DEMO