角度2複数のHttp GET応答がクラスに対応する

Question

私は車とトラックという2つのクラスを持っています。

JSONにオブジェクトの配列を返すcars.comとlorries.comというAPI URLがあります。

私は2つの変数を持つサービスを持っています： cars：car []; lorries：トラック[];

サービスでは、getData（）という関数が必要です。このAPIは、両方のAPI URLを同時に呼び出す必要があり、車や列車の配列に応答をマップする必要があります。

どうすればいいですか？

Answer 1

まず、一般的にではないは、このシナリオでAPIから返されたデータを表すクラスを使用します。そのクラスで作成されておらず、実際にはJSON.parseで作成されたオブジェクトのタイプを指定するだけで、クラスを使用するのは間違いです。このシナリオでは、インタフェースを使用する必要があります。さておき、あなたは比較的簡単な方法で

vehicle.service.ts

import 'rxjs/add/Observable/forkJoin'; 
import 'rxjs/add/operator/merge'; 
import {Observable} from 'rxjs/Observable'; 
import {Http} from '@angular/http'; 

import {Car, Lorry} from './resources'; 
import injected from './injected'; 

@injected export default class VehicleService { 

    constructor(readonly http: Http) {} 

    getCarsAndLorries(): Observable<(Car | Lorry)[]> { 
    return Observable 
     .forkJoin(this.getCars(), this.getLorries()) 
     .merge();    
    } 

    getCars() { 
    return this.http.get('api/cars') 
     .map(response => response.json() as Car[]); 
    } 

    getLorries() { 
    return this.http.get('api/lorries') 
     .map(response => response.json() as Lorry[]); 
    } 
} 

resources.ts注入さ

export interface Car { 
    miles: number; 
    make: string; 
    doors: 2 | 4; 
    drive: 'fwd' | 'rwd'| '4wd'; 
    ... 
} 

export interface Lorry { 
    miles: number; 
    make: string; 
    card: Product[]; 
    ... 
} 

// you get the idea.... 
export interface Product { 
    name: string 
    .... 
} 

をあなたの目標を達成することができます

。 t

/** 
* c the newable being decorated 
**/ 
export default function (c: new (...args: any[]) => {}) { 
    console.info('type metadata is emit is triggered by any decorator'); 
    return c; 
}  

app.module.d.ts inject` @カスタムデコレータを `使用する理由

import {NgModule} from '@angular/core'; 
import VehicleService from './vehicle.service'; 

@NgModule({ 
    providers: [VehicleService] 
}) export default class {}