angular2 beobachtbar, immer undefiniert in Komponente

Question

Ich bin neu auf angular2, brauche ich etwas Hilfe. Ich verwende unterhalb der Serviceklasse.

Wenn ich über Service in unter Komponente aufrufen, bekomme ich undefinierten Wert.

import{Component, OnInit} from 'angular2/core'; 
import{UsersService} from './users.service'; 

@Component({ 
    selector: 'users', 
    template:'In users', 
    //templateUrl: 'app/users.component.html', 
    providers: [UsersService] 
}) 

export class UsersComponent implements OnInit{ 
users: any[]; 

    constructor(private _service: UsersService){ 
    } 

    ngOnInit(){ 
     this._service.getUsers() 
      .subscribe(result => this.users = result); 

     console.log(this.users); 
    } 
} 

Aber wenn ich versuchte, den Wert in der Konsole in der Serviceklasse zu protokollieren, wird es dort angezeigt. jede Hilfe wäre sehr bemerkenswert. Danke

Answer 1

this.user wird verfügbar sein, sobald das Observable bereit sein wird, bis dahin müssen Sie Ihren HTML-Code mit * ngIf schützen, um Ausnahmen zu vermeiden.

Answer 2

Angular 2 HTTP-Anfragen geben Observables zurück, die asynchron von anderem Code ausgeführt werden. In der ngOnInit(), abonnieren Sie die Observable, die getUsers() zurückgibt, und dann außerhalb des Abonnements haben Sie die console.log().

Mit anderen Worten, die console.log(this.users) wird ausgeführt, bevor die getUsers() tatsächlich die HTTP-Anforderung abgeschlossen hat, um die Benutzer tatsächlich zu erhalten, und bevor das Abonnement sie this.users zugewiesen hat.

Alter ngOnInit() wie so und Sie werden das gewünschte Ergebnis sehen:

ngOnInit(){ 
    this._service.getUsers() 
     .subscribe(result => { 
      this.users = result; 
      console.log(this.users); 
     }); 
} 

Siehe auch:

RxJS docs on Observables

Angular 2 docs on the HTTP client