Данные, возвращенные из сервиса Angular2 RC3 http undefined

Question

У меня есть довольно простой веб-проект, чтобы узнать Angular2 RC3 (TypeScript). На данный момент у меня нет бэкэнд и попробуйте загрузить несколько изображений из файла JSON с помощью HTTP GET-запроса.

Я следил за официальной документацией по созданию служб, и все работает без исключений или ошибок. Однако данные, возвращаемые из моей службы, всегда не определены, несмотря на то, что HTTP GET-запрос завершен успешно, и я могу видеть данные ответа в Firebug. Ниже то, что я сделал до сих пор ...

images.json файл:

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

Часть службы, ответственной за загрузку файла JSON выглядит следующим образом:

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); 
}; 

изображение простой класс:

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

Компонент, который использует службу выглядит отчасти так:

... 
@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 (изображения) сверху, отображает неопределенный

Я очень озадачен тем, что я сделал неправильно , любая помощь действительно ценится.

Answer 1

Ваша структура JSON - это массив. Вы пытаетесь получить атрибут data этого массива. Но массивы не имеют атрибутов data.

response.json() - это ваш массив. Нет необходимости добавлять .data.

Answer 2

Проверьте

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

имеет ничего response.json(). Сделайте что-то вроде:

.then(response => { 
    console.log(response.json()); 
    return response.json().data) 
}) 

Answer 3

Отсутствует проблема с атрибутом данных является основной проблемой в уроке «Тур героев» Angular2 в части 6: https://angular.io/tutorial/toh-pt6 во время шагов, описанных при изменении данных из статического макета с использованием InMemoryDataService.

Этот метод имеет метод getHeros() и getHeros (id). Удаление части «.data» выражения решит результат «undefined».