angular - 2 つの異なる非同期メソッドの結果に基づいて結果を設定する方法

Question

私のデータサービスには次のものがあります。

//Observables
currentTicket$: Observable<Ticket>;
ticketTypes$: Observable<Array<TicketType>>;
currentTicketSurvey$: Observable<TicketSurvey>;


//observers
private _ticketTypesObserver: any;
private _currentTicketSurveyObserver: any;
private _currentTicketObserver: any;

private _dataStore: {
    currentTicket: Ticket,
    ticketTypes: Array<TicketType>,
    currentTicketSurvey: TicketSurvey
}

constructor(private http: Http){
//set up observables
this.currentTicket$ = new Observable(observer=> this._currentTicketObserver = observer).share();
    this.ticketTypes$ = new Observable(observer=> this._ticketTypesObserver = observer).share();
    this.currentTicketSurvey$ = new Observable(observer=> this._currentTicketSurveyObserver = observer).share();


//init datastore
this._dataStore = {
        currentTicket: null,
        ticketTypes: [],
        currentTicketSurvey: null
    };
}



//Data Retrieval Methods

getTicketTypes() {
    if (this._dataStore.ticketTypes.length > 0) //if we already have ticket types, don't refresh.  Static Data.
        return;

    this.http.get('http://localhost:65421/tickets/GetTicketTypes/')
        .map(res => (<Response>res).json())
        .map((types: Array<any>) => {
            let result: Array<TicketType> = [];
            if (types) {
                types.forEach(ticketType => {
                    result.push(
                        new TicketType(
                            ticketType.Description
                            , ticketType.Id
                            , ticketType.IsDisplayed
                        ));
                });
            }

            return result;
        }).
        subscribe(
        data => {
            this._dataStore.ticketTypes = data;
            this._ticketTypesObserver.next(this._dataStore.ticketTypes);
        },
        err => {
            console.log(err);
        }
        );
}


getTicketSurvey(ticketId:string) {

    this.http.get('http://localhost:65421/tickets/GetTicketById/' + ticketId)
        .map(res => (<Response>res).json())
        .map((survey: TicketSurvey) => {
            let result: TicketSurvey = null;
            if (survey) {
                result = new TicketSurvey(
                    survey.id,
                    survey.ticketId,
                    survey.ticketTypeId
                );
            }

            return result;
        }).
        subscribe(
        data => {
            this._dataStore.currentTicketSurvey = data;
            this._currentTicketSurveyObserver.next(this._dataStore.currentTicketSurvey);
        },
        err => {
            console.log(err);
        }
        );
}


getTicketById(id:string) {
    this.http.get('http://localhost:65421/tickets/GetTicketById/' + id)
        .map(res => (<Response>res).json())
        .map((ticketRes: Ticket) => {
            let result: Ticket = null;
            if (ticketRes) {
                result = new Ticket(
                    //Set constructor values
                );
            }

            return result;
        }).
        subscribe(
        data => {
            this._dataStore.currentTicket = data;
            this._currentTicketObserver.next(this._dataStore.currentTicket);
        },
        err => {
            console.log(err);
        }
        );
}

私のコンポーネントには次のものがあります：

currTicket: Ticket;
ticketTypes: Array<TicketType>;
currTicketType: TicketType;
currTicketSurvey: TicketSurvey;


ngOnInit() {
    this.ticketDataService.currentTicket$.subscribe(cTicket => this.currTicket = cTicket);
    this.ticketDataService.ticketTypes$.subscribe(tTypes => this.ticketTypes = tTypes);
    this.ticketDataService.currentTicketSurvey$.subscribe(cSurvey => this.currTicketSurvey = cSurvey);

    this.load();
}

load()
{
    this.ticketDataService.getTicketById(this._routeParams.get('id'));
    this._ticketDataService.getTicketTypes();
    this._ticketDataService.getTicketSurvey(this._routeParams.get('id'));

    //////************ Need something here to set the current ticket type

    //this.ticketTypes.forEach((tType)=>{
    //    if(tType.id == this.currTicketSurvey.ticketTypeId)
    //    this.currTicketType = tType;
    //    return;
    //});

}

私が抱えている問題は、コンポーネントで currentTicketType を設定するにはどうすればよいですか? これは、 currentTicketSurvey がロードされていることと、 ticketTypes がロードされていることに依存します。これらは、コードの他の領域で一緒に呼び出される場合と呼び出されない場合があります。これらは非同期呼び出しであるため、サービスで呼び出した直後に設定することはできません。ノックアウトでは、計算されたオブザーバブルを設定するだけで完了できると思います。Angular 2 に相当するものが見つかりません。この状況を処理して、他のオブジェクトが読み込まれたときに currentTicketType を設定する方法についてのアイデアはありますか?

確かによく出てきます。私が見た例は、defer と concatAll を使用すると似ていますが同じではありませんが、これらのメソッドが常に同じ順序または同時に呼び出されると想定しているように見えます。私はまだ探しているものをまとめることができませんでした。