Question

我已经设置了一个非常简单的Web项目来学习Angular2 RC3（TypeScript）。我目前没有后端，并尝试使用HTTP GET请求从JSON文件加载多个图像。

我已经按照有关创建服务的官方文档进行操作，并且所有内容都运行无异常或错误。但是，尽管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（images），显示 undefined

对于我做错了什么，我感到非常困惑，真的很感激任何帮助。

Answer 1

您的JSON结构是一个数组。您正在尝试访问该阵列的data属性。但数组没有任何data属性。

response.json()是你的数组。无需附加.data。

Answer 2

缺少数据属性问题是第6部分中“英雄之旅”Angular2教程中的基本问题：https://angular.io/tutorial/toh-pt6在将数据从静态模拟更改为使用InMemoryDataService时所概述的步骤中。{/ p >

getHeros（）和getHeros（id）方法都存在此问题。删除表达式的“.data”部分将解析“未定义”结果。

Answer 3

检查是否

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

Angular2 RC3 http服务返回的数据未定义

3 个答案: