类型“Object”上不存在属性“json”

我正在尝试使用 Angular 2 HttpClient 通过 REST 获取数据。我正在关注这里的角度教程https://angular.io/tutorial/toh-pt6 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);
}

我正在使用 IntelliJ Idea，调用 response.json() 时有一条红线，甚至当我尝试使用ng build我得到了错误。

类型“Object”上不存在属性“json”。

您可能会注意到，而不是json().data I have json().results。这是因为根据教程，服务器响应的对象具有data字段，但我自己的服务器响应一个具有results场地。如果您向下滚动一下教程，您就会看到这一点。

请注意服务器返回的数据的形状。这个特别的 内存中 Web API 示例返回具有数据属性的对象。你的 API 可能会返回其他内容。调整代码以匹配您的网络 API。

为了解决这个问题，我尝试了这样的事情

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

当我这样做时， .json() 方法已解决，但弹出另一个错误

Promise 类型上不存在属性结果

我尝试通过定义接口来解决这个问题

interface OrderResponse {
    orders: Order[];
}

并将 get 调用修改为

 .get<OrderResponse>(url)...

但这也行不通。又弹出一个错误

类型“OrderResponse”不可分配给类型“Response”。

需要注意的一件事是，在教程中他们使用了 Angular HttpModule，但在我的应用程序中我使用的是新的 Angular HttpClientModule，所以也许这就是错误出现的地方。

我是 Angular 2 的新手，这是我用它构建的第一个应用程序。如果上述代码对于新的 HttpClientModule 不再有效，我将不胜感激有关如何使用新的 HttpClientModule 实现相同目标的任何帮助。

我发现类似的问题类型“{}”上不存在属性“json” https://stackoverflow.com/questions/33919710/property-json-does-not-exist-on-type/33919897 and 类型“对象”上不存在属性 https://stackoverflow.com/questions/43338763/property-does-not-exist-on-type-object但那里的答案都没有帮助我。

Update

正如评论所建议的，新的 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;
});

我完全理解这一点，但我的问题是，该代码不在组件中，而是在服务中，因此调用订阅并将结果分配给实例字段没有多大意义。

我需要我的服务返回一组包含在 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() 的调用是异步的，并且该方法甚至可能在获取所有数据之前返回并且订单数组可能为空。

Update

根据要求，这里是handleError的代码

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

对于未来的访客: 在新的HttpClient https://angular.io/guide/http（角度 4.3+），response对象默认是JSON，所以你不需要这样做response.json().data不再了。只需使用response直接地。

Example（根据官方文档修改）：

import { HttpClient } from '@angular/common/http';

@Component(...)
export class YourComponent implements OnInit {

  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('https://api.github.com/users')
        .subscribe(response => console.log(response));
  }
}

不要忘记导入它并将该模块包含在imports在你的项目中应用程序模块.ts:

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module after BrowserModule.
    HttpClientModule,
    ...
  ],
  ...