角度2で複数の非同期チェーン機能を動作させることができません

Question

私は現在角2を学んでいます私はあまりにも戸惑っていますが、多連の非同期関数を得ることができないようです...

私はコードを説明して短縮しようとしていますが、私はAPIにgetメソッドを要求しています。これは従業員のリストです。現在、テーブルが "listToDisplay"問題は、カレンダーが表示されたときに、私がlistEmployeeBirthdayに満ちている誕生日を表示していないことです。

私はupdateCalendarメソッドを呼び出すと、システムがlistEmployeeBirthdayをfiにする私がコードで示したように、私はlistEmployeeBirthdayをログに記録し、正しく埋めますが、警告メッセージが表示されます：「値はちょうど今評価されました」。私はこの修正を得るためにすべてを試しましたが、getEmployeesが終了した直後にupdateCalendarが実行する作業をしていないようです。

私はあなたが前にロードされているlistEmployeeBirthdayを（）解決すべき任意のヘルプ

ngOnInit(){ 

    this.getEmployees() 

    this.updateCalendar() 

    console.log("listEmployeeBirthday") 

} 



getEmployees(){ 

    this.http.get("apiadress...") 
     .flatMap((response:Response) => response.json()); 
     .map((employee)=>{ 
     this.addCalendar(employee); 
     this.listToDisplay.push(employee) 
     }) 
     .subscribe(); 
} 

addCalendar(employee){ 
    this.listEmployeeBirthday.push(employee.birthdate); 
} 


updateCalendar(){ 
    methodToUpdateCalendar(this.listEmployeeBirthday) 
} 

Answer 1

以下getEmployeesが非同期であるため、はい、あなたのupdateCalendar関数は何もしないような解決サービスを取得します。だから、従業員がロードされたときに、カレンダーを更新する必要があります。

this.http.get("apiadress...") 
    .flatMap((response:Response) => response.json()) 
    .map((employee)=>{ 
    this.addCalendar(employee); 
    this.listToDisplay.push(employee); 
    }) 
    .subscribe(() => { 
    this.updateCalendar(); 
    }); 

ところでmapオペレータが、実際にはないいくつかのアクションを実行するために、データをマップするために使用する必要があります。良い方法は：

this.http.get("apiadress...") 
    .flatMap((response:Response) => response.json()) 
    .subscribe(() => { 
    this.addCalendar(employee); 
    this.listToDisplay.push(employee); 

    this.updateCalendar(); 
    }); 

Answer 2

をいただければ幸いです。角度がある場合、経路が有効になる前にサービスを解決することができます。下のリンクをクリックしてください。

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { yourservice } from './yourservice'; 

@Injectable() 
export class AppResolve implements Resolve<any> { 
constructor(private dropDownService: DropDownService) { } 
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any[] { 
    return listEmployeeBirthday;// return your service here. 
} 
} 

appModuleプロバイダで決意の上に追加します。以下のような決意を作成します。 とルータに次のように追加します。

{ path: 'currentRoute', component: component, resolve: [resolveMethodcreatedabove]}, 

そして、あなたの現在のコンポーネントに

import { Router, ActivatedRoute } from '@angular/router' 
constructor(private currentRoute: ActivatedRoute) { 

} 
ngOnInit() { 
    this.currentRoute.data.subscribe(data => listEmployeeBirthday = data); 
    }