Angular 2 - хорошая практика при преобразовании ответа в угловую модель

Что является хорошей практикой для преобразования ответа (например, данных json) в угловую модель? Итак, другими словами, как добиться функциональности Auto Mapper в angular 2.

team.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Team } from './team.model';

@Injectable()
export class TeamService {

  constructor(private _http: Http) {
  }

  public GetAllTeams(): Promise<Team[]> {
    return this._http.get('/app/teams/shared/team.data.json')
                    .toPromise()
                    .then(respons => <Team[]> respons.json().data as Team[])
                    .then(data => { return data; });
  }
}

team.data.json

{
    "data": [
        {"id": "1", "name": "Team 1", "otherProperty" : "S1"},
        {"id": "2", "name": "Team 2", "otherProperty" : "S2"},      
    ]
}

team.model.ts

export class Team {

  private _id: string;
  public get id(): string {
    return this._id;
  }

  public set id(value: string) {
    this._id = value;
  }

  private _name: string;
  public get name(): string {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }

  private _icon: string;
  public get icon(): string {
    return this._icon;
  }

  public set icon(value: string) {
    this._icon = value;
  }

}

Метод GetAllTeams должен возвращать Team объектов. Я знаю, что могу создать фабрику, которая получает данные json и возвращает массив объектов Team, но после прочтения этой статьи https://angular.io/docs/ts/latest/guide/dependency-injection.html (раздел car-factory.ts), похоже, это плохой шаблон. Спасибо.


angular angular-services angular-factory
person wolfpack    schedule 28.12.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

На самом деле вам не нужно создавать класс как модель, если вам нужна строгая типизация. Вместо этого вы можете использовать Интерфейс.

export interface Team {
    id: string;
    name: string;
    icon: stirng;
    someOtherProperty: [];
}

Преимущество использования интерфейса заключается в том, что вы получаете строгую типизацию, в то время как код для интерфейса не генерируется, а класс генерирует дополнительный код.

То, как вы делаете преобразование ответов сейчас, я думаю, хорошо, ИМХО.

public GetAllTeams(): Promise<Team[]> {
    return this._http.get('/app/teams/shared/team.data.json')
                .toPromise()
                .then(respons => respons.json())
                .then(x => x.data);
}

Всегда помните, что TypeScript — это Javascript + сильный тип. Не пытайтесь привнести в него всю реализацию ОО (хотя иногда это заманчиво).

person Chybie    schedule 28.12.2016
comment
Спасибо, использование интерфейса вместо класса в моем случае кажется уместным. stackoverflow .com/questions/37652801/ - person wolfpack; 29.12.2016