Immer ein object-array aus einer Eckigen service

Ich bin neu Eckig (und Javascript für diese Angelegenheit). Ich habe geschrieben ein Eckiges service gibt ein array von Benutzern. Der Abruf von Daten aus einer HTTP-Aufruf liefert die Daten im JSON-format. Bei der Anmeldung werden die JSON-Daten zurückgegeben, die von der HTTP-Aufruf kann ich sehen, dass dieser Aufruf erfolgreich ist und die korrekten Daten zurückgegeben. Ich habe eine Komponente, die Aufrufe der service-um den Anwender und eine HTML-Seite, die zeigt die Benutzer. Ich kann nicht die Daten aus dem service, um die Komponente. Ich vermute, ich bin mit dem Beobachtbaren falsch. Vielleicht bin ich mit zu abonnieren, die fälschlicherweise als gut. Wenn ich kommentiere die getUsers-Aufruf in der ngInit Funktion und kommentieren Sie die getUsersMock nennen, funktioniert alles einwandfrei und ich sehe die angezeigten Daten in der listbox in der HTML-Seite. Ich möchte zum konvertieren der JSON-Daten an ein array oder eine Liste von Benutzern im service, eher dann wieder JSON aus dem Dienst und der Komponente konvertieren.

Zurückgegebenen Daten aus HTTP-Aufruf, um Benutzer:

[
    {
        "firstName": "Jane",
        "lastName": "Doe"
    },
    {
        "firstName": "John",
        "lastName": "Doe"
    }
]

Benutzer.ts

export class User {
    firstName: string;
    lastName: string;
}

Benutzer-service.ts

...
@Injectable
export class UserService {
    private USERS: User[] = [
        {
            firstName: 'Jane',
            lastName: 'Doe'
        },
        {
            firstName: 'John',
            lastName: 'Doe'
        }
    ];

    constructor (private http: Http) {}

    getUsersMock(): User[] {
        return this.USERS;
    }

    getUsers(): Observable<User[]> {
        return Observable.create(observer => {
            this.http.get('http://users.org').map(response => response.json();
        })
    }
...

Benutzer.Komponente.ts

...
export class UserComponent implements OnInit {
    users: User[] = {};

    constructor(private userService: UserService) {}

    ngOnInit(): void {
        this.getUsers();
        //this.getUsersMock();
    }

    getUsers(): void {
        var userObservable = this.userService.getUsers();
        this.userObservable.subscribe(users => { this.users = users });
    }

    getUsersMock(): void {
        this.users = this.userService.getUsersMock();
    }
}
...

user.component.html

...
<select disabled="disabled" name="Users" size="20">
    <option *ngFor="let user of users">
        {{user.firstName}}, {{user.lastName}}
    </option>
</select>
...

!!! UPDATE !!!

Hatte ich gelesen das "Helden" - tutorial, war aber nicht für mich arbeiten, also ging ich Los und habe versucht, andere Dinge. Ich habe re-implementiert meinen code, den Weg der Helden-tutorial beschreibt. Allerdings, wenn ich das log der Wert dieser.Benutzer meldet, ist nicht definiert.

Hier ist mein überarbeitetes Benutzer-service.ts

...
@Injectable
export class UserService {
    private USERS: User[] = [
        {
            firstName: 'Jane',
            lastName: 'Doe'
        },
        {
            firstName: 'John',
            lastName: 'Doe'
        }
    ];

    constructor (private http: Http) {}

    getUsersMock(): User[] {
        return this.USERS;
    }

    getUsers(): Promise<User[]> {
        return this.http.get('http://users.org')
            .toPromise()
            .then(response => response.json().data as User[])
            .catch(this.handleError);
    }
...

Hier ist mein überarbeitetes user.Komponente.ts

...
export class UserComponent implements OnInit {
    users: User[] = {};

    constructor(private userService: UserService) {}

    ngOnInit(): void {
        this.getUsers();
        //this.getUsersMock();
    }

    getUsers(): void {
        this.userService.getUsers()
            .then(users => this.users = users);

        console.log('this.users=' + this.users); //logs undefined
    }

    getUsersMock(): void {
        this.users = this.userService.getUsersMock();
    }
}
...

!!!!!!!!!! ENDGÜLTIGE LÖSUNG !!!!!!!!!!
Dies wird alle Dateien, die für die endgültige Lösung:

Benutzer.ts

export class User {
    public firstName: string;
}

Benutzer.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { User } from './user';

@Injectable()
export class UserService {
    //Returns this JSON data:
    //[{"firstName":"Jane"},{"firstName":"John"}]
    private URL = 'http://users.org';

    constructor (private http: Http) {}

    getUsers(): Observable<User[]> {
        return this.http.get(this.URL)
            .map((response:Response) => response.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
    }
}

Benutzer.Komponente.ts

import { Component, OnInit }   from '@angular/core';
import { Router }              from '@angular/router';

import { User }        from './user';
import { UserService } from './user.service';


@Component({
    moduleId: module.id,
    selector: 'users-list',
    template:  `
        <select size="5">
            <option *ngFor="let user of users">{{user.firstName}}</option>
        </select>
    `
})

export class UserComponent implements OnInit{
    users: User[];
    title = 'List Users';

    constructor(private userService: UserService) {}

    getUsers(): void {
        this.userService.getUsers()
            .subscribe(
                users => {
                    this.users = users;
                    console.log('this.users=' + this.users);
                    console.log('this.users.length=' + this.users.length);
                    console.log('this.users[0].firstName=' + this.users[0].firstName);
                }, //Bind to view
                            err => {
                        //Log errors if any
                        console.log(err);
                    })
    }

    ngOnInit(): void {
        this.getUsers();
    }
}