angular - 当数据服务控制台记录数据正常时，Angular2解析器返回未定义

我试图在使用angular2的解析器显示组件之前预取数据。
所以在我的data.service.ts中：
我有一个函数可以检索员工详细信息：

  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.

在employee-detail-resolver.service.ts文件中，我设置了一个类似这样的解析器：

@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;
      }
    });

}

}

我尝试从employee-detail.component.ts文件中的解析器获取数据，如下所示：

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']);
  }
}

我知道我得到的数据是准确的，因为我在控制台中看到了它，我的模板使用*ngif=“employee”加载时没有数据。我不明白为什么我的组件返回未定义的值..
我的路由模块如下所示：

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});

我已在app.module.ts中将其声明为提供商：

  providers: [ DataService, EmployeeDetailResolver ],

有人能帮我理解我做错了什么吗？是吗？
修复：
在employee-detail.component.ts中
我改成了

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

现在每次我点击都会显示数据！
是快照！！！

最佳答案

依赖于异步调用数据的代码需要在数据到达时调用的回调中执行：

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