Angular 4 英雄之旅:第 6 部分(主细节示例)，使用 REST API 时不起作用

Question

>我下载了角度示例 - 英雄之旅：第 6 部分 - https://angular.io/tutorial/toh-pt6 并安装了它，它工作正常。它使用内存中的 Web API。

我想将其更改为使用 REST(JSON) api。

所以我做了以下更改。

1. app.module.ts 改变

   InMemoryWebApiModule.forRoot(InMemoryDataService)

自

InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true})

2. hero.service.ts 改变

   私人英雄网址 = 'api/heroes';

自

private heroesUrl = 'https://.../getdata.php
private heroesDetailsUrl = 'https://.../getdatadetails.php

主视图是英雄组件.html 详细信息视图是 hero-details.component.ts

进行更改后，主视图工作正常，我看到主数据列表。 现在，当我从"主"视图中选择一行时 - 它会转到详细信息视图，但我无法看到详细信息数据。 我尝试打印 hero 对象(其中包含在主文件中选择的对象的详细信息，但它在 Javascript 控制台中始终显示为未定义，并且我无法访问它的任何属性。

hero-details.components.ts

ngOnInit(): void {
console.log('inside hero-details.component');
console.log(this);  
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
.subscribe(hero => this.hero = hero);
}

我还需要更改哪些内容才能将主视图中的选定对象传递到详细信息视图？ 如果我在内存 Web api 中切换，但不适用于 REST api，则该示例可以完美运行。REST api 返回的数据格式与 inMemoryapi 完全相同。 感谢所有回应的人。

Answer 1

Hero 对象永远不会从主节点传递到详细信息，只会传递所选英雄的 ID，正如您在 heroes.component.ts 中的第 54 行看到的那样，路由器导航到详细信息路由并传入选定的英雄 ID。

当 details 组件启动时，它让 hero 服务使用通过 URL 从主节点传入的英雄 ID 从 API 获取英雄，如您在 hero-details.component.ts 中看到第 38 行，在调用订阅函数之前，hero 在详细信息组件中不可用，这意味着其余 API 请求已完成并返回英雄。

我建议您将 hero-details.component.ts 中的第 40 行替换为.subscribe(hero => {this.hero = hero, console.log("here's the hero!:", this.hero);});，一旦 api 请求完成，您将在控制台中看到英雄。

如果 rest API 返回数组，则需要选择第一个元素(索引 0 处)。