Le résolveur Angular2 renvoie undefined lorsque la console de service de données enregistre les données correctement

Question

J'essaie d'extraire les données avant d'afficher le composant en utilisant le résolveur de angular2.

donc dans mes data.service.ts: J'ai une fonction qui récupère un détail des employés:

getEmployee(id:string) { 
     let headers = new Headers(); 
     this.createAuthorizationHeader(headers); 
     this.employeeUrl = 'someurl/property?'+'employee_number='+id; 
     return this._http.get(this.employeeUrl, {headers}) 
     .map(resp => resp.json()) 
     .do(data => console.log('employee: ' + JSON.stringify(data))) 

//this returns a json log in console. 

Dans mon fichier resolver.service.ts-détail des employés que j'ai mis en place un résolveur comme ceci:

@Injectable() 
export class EmployeeDetailResolver implements Resolve<IEmployee>{ 
    employee: IEmployee; 

    constructor(private _dataService: DataService, private router: Router) {} 

    resolve(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Observable<IEmployee> { 
    console.log('returning resolved data'); 
    let id = route.params['id']; 
    return this._dataService.getEmployee(id) 
     .map(employee => { 
     if(employee) { 
     return employee; 
     } else { 
     this.router.navigate(['/employees']); 
     return null; 
     } 
    }); 

} 

} 

et j'essaie d'obtenir les données du résolveur dans mon dossier employé-detail.component.ts comme ceci:

export class EmployeeDetailComponent implements OnInit { 
    busy: Subscription; 
    employee: IEmployee; 
    id: string; 

    constructor(private route: ActivatedRoute, 
       private router: Router, 
       private _dataService: DataService 
      ) { 

    } 


    ngOnInit() { 
    this.route.data 
     .subscribe((data: {employee: IEmployee}) => { 
     this.employee = data.employee; 
     }) 
    console.log("testing employee detail:", this.route.snapshot.data['data']); 
    // this logs undefined in the console 
    } 

    onBack(): void { 
    this.router.navigate(['/employees']); 
    } 
} 

Je sais que je reçois les données avec précision parce que je le vois dans la console, et mon modèle avec * ngIf = "employé" charge sans données. Je ne comprends pas pourquoi retourne ma composante valeur non définie ..

mon module de routage ressemble à ceci:

const APP_ROUTES: Routes = [ 
    {path: 'employee/:id', component: EmployeeDetailComponent, 
     resolve: { 
     employee: EmployeeDetailResolver 
     } 
    }, 
    {path: 'employees', component: EmployeesListComponent}, 
    {path: '', redirectTo: '/employees', pathMatch: 'full' } 
]; 

export const Routing = RouterModule.forRoot(APP_ROUTES, {useHash: true}); 

je l'ai déclaré en tant que fournisseur dans mes app.module.ts:

providers: [ DataService, EmployeeDetailResolver ], 

quelqu'un peut s'il vous plaît m'aider à comprendre ce que je fais mal ??

CORRECTIF: dans l'employé-detail.component.ts j'ai changé pour

ngOnInit() { 
    this.employee = this.route.snapshot.data['employee'][0]; 
    console.log("working?",this.employee[0]); 
    } 

et maintenant l'affichage de données à chaque fois que je clique! C'était un instantané !!!

code

Answer 1

qui dépend des données des appels asynchrones doit être exécuté dans les callbacks qui sont appelés lorsque les données arrivent:

this.route.data 
    .subscribe((data: {employee: IEmployee}) => { 
    this.employee = data.employee; 
    console.log("testing employee detail:", data['data']); 

    }) 
    // code here is executed before async data was received