angular – 属性’json’在’Object’类型上不存在

我正在尝试通过REST使用angular 2 HttpClient获取数据.我正在遵循角度教程 https://angular.io/tutorial/toh-pt6,在英雄和HTTP部分下你会看到这段代码用于通过http获取英雄数据.

getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
         .toPromise()
         .then(response => response.json().data as Hero[])
         .catch(this.handleError);
}

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

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.

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

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

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

Property results does not exist on type Promise

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

interface OrderResponse {
    orders: Order[];
}

并修改了get调用

.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()方法.我仍然感谢有关如何使用新模块实现相同效果的帮助.从指南他们做了这样的事情

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数组.我的组件可以像这样打电话

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

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

.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的代码

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

[{},{},...{}]

// Somewhere in your src folder

export interface Order {
  // Properties
}

import { HttpClient,HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { Order } from 'somewhere_in_src';    

@Injectable()
export class FooService {
 ctor(private http: HttpClient){}

 fetch(startIndex: number,limit: number): Observable<Order[]> {
    let params = new HttpParams();
    params = params.set('startIndex',startIndex.toString()).set('limit',limit.toString());
    // base URL should not have ? in it at the en
    return this.http.get(this.baseUrl,{
       params
    })
    .map(res => res.results as Order[] || []); 
   // in case that the property results in the res POJO doesnt exist (res.results returns null) then return empty array ([])
  }
}

// In some component for example
this.fooService.fetch(...).subscribe(data => ...); // data is Order[]