Ich habe ein recht einfaches Webprojekt eingerichtet, um Angular2 RC3 (TypeScript) zu lernen. Ich habe momentan kein Backend und versuche, mehrere Bilder aus einer JSON-Datei mit einer HTTP-GET-Anfrage zu laden.

Ich habe die offizielle Dokumentation zum Erstellen von Diensten befolgt und alles läuft ohne Ausnahmen oder Fehler. Die von meinem Dienst zurückgegebenen Daten sind jedoch immer undefiniert, obwohl die HTTP-GET-Anforderung erfolgreich abgeschlossen wurde und die Antwortdaten in Firebug angezeigt werden. Folgendes habe ich bisher gemacht ...

images.json Datei

[
    {
      "description": "image1",
      "file": "image1.jpeg"
    },
    {
      "description": "image2",
      "file": "image2.jpeg"
    },
    {
      "description": "image3",
      "file": "image3.jpeg"
    }
]

Der Teil des Dienstes, der für das Laden der JSON-Datei verantwortlich ist, sieht folgendermaßen aus:

import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
....
constructor(private http: Http) {}

getImages(imagesUrl) : Promise<Image[]> {
    return this.http.get(imagesUrl)
            .toPromise()
            .then(response => response.json().data)
            .catch(this.handleError);
};

Das Bild ist eine einfache Klasse:

export class Image {
    description : string;
    file : string;
}

Die Komponente, die den Dienst verwendet, sieht zum Teil folgendermaßen aus:

...
@Component({
...
providers : [ ImageService ]
...
})
constructor(private imageService : ImageService) {}

ngOnInit() {
    this.imageService.getImages(this.imageSrcDir + "images.json")
        .then(images => console.log(images))
        .catch(error => console.log(error));
    }

console.log (images) von oben zeigtnicht definier

Ich bin ziemlich verwirrt, was ich falsch gemacht habe, jede Hilfe wird wirklich geschätzt.