Angular2 rxjs调用以获取REST API并获取未定义的输出

Question

I have problem with my Angular2 service. My function call to rest server, next I would like to print output but console.log shows undefined .

Main class

export class EventListComponent implements OnInit {
  events: Event[];

  constructor(
    private eventService: EventService
  ) {}

  loadPosts() {
    console.log('loading');
    this.eventService.getEvents()
      .subscribe(
        events => this.events = events,
        err => {
          console.log(err);
        });
    console.log(this.events); // undefined
  }

  ngOnInit() {
    // Load comments
    this.loadPosts();
  }
}

And EventService

@Injectable()
export class EventService {

  private eventsUrl = 'http://localhost:5000/search';

  constructor(private http: Http) {}

  getEvents(): Observable<Event[]> {

    return this.http.get(this.eventsUrl)
      .map((res: Response) => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

}

Whats is wrong?

Answer 1

You're logging this.events before it is set. Do:

  loadPosts() {

    this.eventService.getEvents()
      .catch(err => console.log(err))
      .subscribe(
        events => {
          this.events = events; 
          console.log(this.events);
      });
  }