Angular 4 Tour of Heroes：第 6 部分（Master Detail 示例），使用 REST api 时不起作用答案

【问题标题】：Angular 4 Tour of Heroes: Part 6 (Master Detail sample), not working when using REST apiAngular 4 Tour of Heroes：第 6 部分（Master Detail 示例），使用 REST api 时不起作用
【发布时间】：2017-11-15 16:14:00
【问题描述】：

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

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

所以我做了以下更改。

app.module.ts 变了

InMemoryWebApiModule.forRoot(InMemoryDataService)

到

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

hero.service.ts 改变了

private herosUrl = 'api/heroes';

到

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

主视图是 heros.component.html 详情视图是 hero-details.component.ts

进行更改后，主视图工作正常，我看到主数据列表。现在，当我从主视图中选择一行时 - 它会转到详细信息视图，但我无法看到详细信息数据。我尝试打印英雄对象（包含在主控中选择的对象的详细信息，但它始终在 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);
  }

我还需要更改什么，以便将 MasterView 中选定的对象传递到详细信息视图？如果我切换到 inMemory web api 但不能与 REST api 一起使用，该示例可以完美运行。 REST api 返回的数据格式与 inMemoryapi 完全相同。感谢所有回复的人。

【问题讨论】：

您确定您的 php 代码正在返回数据吗？尝试使用 Fiddler 检查响应。
我可以看到您正在将所选英雄的 Id 参数传递给 heroService getHero 方法，但是您实际上在哪里将参数传递给其余 api？您不应该将 Id 作为 url 参数附加到 getdatadetails.php 端点吗？（例如？id=hero_id）。
不知何故您需要将 id 发送到您的休息端点，我不知道您的休息 api 路由是如何设置的，但正如您在 getHero 方法的第一行中看到的那样， hero 被附加到 url，因为您为 hero 详细信息 url 创建了一个新变量，请确保更改方法以使用新变量，并以您的 rest 端点期望的方式附加 hero 的 Id，或者作为一部分角度示例中的路线或路线参数。
angular2/4相关问题请不要使用angularjs标签
@cybernet123 为什么选择 devicedetailsUrl？不应该是 herosDetailsUrl 吗？并且您的 rest api 是否希望为 details 端点提供一个 id 参数？

标签： angular

【解决方案1】：

Hero 对象永远不会从 master 传递到 detail，只有选定的 hero 的 id，正如您在 hero.component.ts 的第 54 行看到的那样，路由器导航到 details 路由并传递选定的 hero id。

当 details 组件启动时，它让 hero 服务使用通过 master 的 URL 传入的 hero id 从 API 获取 hero，如您在 hero-details.component.ts 中的第 38 行看到的那样，英雄赢了'在调用 subscribe 函数之前在 details 组件中不可用，这意味着完成了其余 API 请求并返回了一个 hero。

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

如果你的 REST API 返回一个数组，你需要选择第一个元素（在索引 0 处）。

【讨论】：