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 и возвращает объекты Array of Team, но после прочтения этой статьи https://angular.io/docs/ts/latest/guide/dependency-injection.html (раздел car-factory.ts), кажется, что это плохая картина. Благодарю.
1 ответ
На самом деле, вам не нужно создавать класс как модель, если вам нужна строгая типизация. Вы можете использовать интерфейс вместо.
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 + сильный тип. Не пытайтесь внести в него всю ОО-реализацию (хотя иногда это заманчиво).