我正在尝试通过REST使用angular 2 HttpClient获取数据.我正在遵循角度教程 https://angular.io/tutorial/toh-pt6,在英雄和HTTP部分下你会看到这段代码用于通过http获取英雄数据. @H_403_1@getHeroes(): Promise<Hero[]> { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json().data as Hero[]) .catch(this.handleError); }

以下是我在我的应用程序中编写的类似版本

@H_403_1@fetch(startIndex: number,limit: number): Promise<Order[]> { let url = this.baseUrl + "&startIndex=" + startIndex + "&limit=" + limit; return this.http.get(url) .toPromise() .then(response => response.json().results as Order[]) .catch(this.handleError); }

我正在使用InteliJ Idea,并且在调用response.json()时有一条红线,即使我尝试使用ng build构建,我也会收到错误.

Property ‘json’ does not exist on type ‘Object’.

您可能会注意到,而不是json().数据我有json().结果.这是因为根据教程,服务器使用具有数据字段的对象进行响应,但我自己的服务器使用具有结果字段的对象进行响应.如果您向下滚动教程,您会看到这一点.

Note the shape of the data that the server returns. This particular
in-memory web API example returns an object with a data property. Your
API might return something else. Adjust the code to match your web
API.

为了解决这个问题,我试过这样的事情

@H_403_1@(response: Response) => response.json().results as Order[]

当我这样做时,.json()方法已被解决,但又出现了另一个错误

Property results does not exist on type Promise

我尝试通过定义界面来解决这个问题

@H_403_1@interface OrderResponse { orders: Order[]; }

并修改了get调用

@H_403_1@.get<OrderResponse>(url)...

但那也行不通.弹出另一个错误

Type ‘OrderResponse’ is not assignable to type ‘Response’.

有一点需要注意的是,在教程中他们使用了Angular HttpModule,但在我的应用程序中我使用的是新的Angular HttpClientModule,所以也许这就是错误发生的地方.

我是Angular 2的新手,这是我用它构建的第一个应用程序.如果上面的代码不再对新的HttpClientModule有效,我会很感激如何使用新的HttpClientModule实现相同的帮助.

我发现了类似的问题Property ‘json’ does not exist on type ‘{}’和Property does not exist on type ‘object’,但没有一个答案帮助了我.

更新

正如评论所暗示的那样,新的HttpClientModule中没有.json()方法.我仍然感谢有关如何使用新模块实现相同效果的帮助.从指南他们做了这样的事情

@H_403_1@http.get<ItemsResponse>('/api/items').subscribe(data => { // data is now an instance of type ItemsResponse,so you can do this: this.results = data.results; });

我完全理解,但我的问题是,代码不在组件内,而是服务,因此调用subscribe并将结果分配给实例字段将没有多大意义.

我需要我的服务来返回一个包含在Promise中的Orders数组.我的组件可以像这样打电话

@H_403_1@this.orderService.fetch(0,10).then(orders => this.orders = orders)

我还想过在我的服务提取方法中声明一个局部变量,这样我就能做到

@H_403_1@.subscribe(data => { this.orders = data.results; } // and out of the get call I return my local variable orders like return Promise.resolve(orders)

但这对我来说没有多大意义,因为对.get()的调用是异步的,即使在获取所有数据并且orders数组可能为空之前,该方法也可能返回.

更新

这里要求的是handleError的代码

@H_403_1@private handleError(error: any): Promise<any> { console.log('An error occured ',error); return Promise.reject(error.message || error); }