Angular 2 Promise问题

Question

I am starting to learn Angular 2 and I am having issues with using Promise.then to return my object from a service. I am currently only using a fixed array (COACHES) for faking a database call. The function in my service is as follows

getCoach(id: number) {
    return Promise.resolve(COACHES).then(
        coaches => coaches.filter(coach => coach.id == id)[0]
    );
}

I then use this in my coach_detail.component.ts in an ngOnInit hook to get the coach object I want using Route Params:

export class CoachDetailComponent implements OnInit {

    coach: Coach;

    constructor(
        private _coachService: CoachService,
        private _routeParams: RouteParams) {}

    ngOnInit() {
        let id = +this._routeParams.get('id');
        this._coachService.getCoach(id).then(coach => this.coach = coach);
        console.log(this.coach);
    }
}

I can see in my console that the promise is returning back to my component but console.log(this.coach) is returning as undefined

Any help is much appreciated as I use a similar logic in a different component to return the entire list of coaches and this works fine!

Answer 1

Your console.log() is called before promise chain is exacuted.

ngOnInit() {
    let id = +this._routeParams.get('id');
    this._coachService.getCoach(id).then(coach => { 
      this.coach = coach 
      console.log(this.coach); // not undefined
    });
    console.log(this.coach); // undefined
}