Angular 2 HTTP（《英雄之旅》教程-angular网站）

Question

在此处关注以下教程： https : //angular.io/docs/ts/latest/tutorial/toh-pt6.html

当前代码： https ： //github.com/GreenAnts/Angular2-tour-of-heroes-tutorial

（请注意：http必须能够正常工作，因为我能够查看英雄和正在查看英雄的仪表板。。。仅当我查看英雄详细信息时，这对我来说就没有意义，因为我从未更改过我能想到的英雄细节方法。）

尝试查看英雄详细信息时出错：

我不知道它是什么，我假设它必须是我所忽略的简单事物，但我真的无法弄清楚，如果遇到任何帮助，将不胜感激。

我在本教程中指出了这一点：

更新英雄详细信息

我们已经可以在英雄详细信息视图中编辑英雄的名称。 继续尝试。 在键入时，英雄名称会在视图标题中更新。 但是，当我们单击“后退”按钮时，更改将丢失！

以前没有丢失更新，这是怎么回事？ 当应用程序使用模拟英雄列表时，将直接在单个应用程序范围的共享列表中对英雄对象进行更改。 现在，我们正在从服务器中获取数据，如果我们希望更改保持不变，则需要将其写回到服务器中。

起初，我认为可能是由于这个原因，但是它说我们应该能够访问局部视图，所以我假设这是另外一个原因。

显示我可以访问其他组件的数据（没有错误）：

Answer 1

事实证明它要简单得多，我应该先看看那里。 h！

您的baseHref为空。 它是：

<base href="" />

并且应该是：

<base href="/" />

您可能需要修复的其他一些问题：

• 在打包生产应用程序时，每个组件中的“ moduleId：module.id”都会给您带来问题。
• getHero方法的签名返回了多个英雄：Hero数组的Promise。 我将其更改为Promise of single Hero（无括号）。

目前：

getHero(id: number): Promise<Hero[]> {
    return this.getHeroes()
    .then(heroes => heroes.find(hero => hero.id === id))
}

应该：

getHero(id: number): Promise<Hero> {
    return this.getHeroes()
    .then(heroes => heroes.find(hero => hero.id === id))
}

• HTML和样式URL并非始终按定义运行：

  templateUrl：“ ./ templates / app.component.html”，

  styleUrls：['./ styles / app.component.css']

像这样在前面添加“ app”：

templateUrl: 'app/templates/app.component.html',
styleUrls: ['app/styles/app.component.css']

• 您的node_modules存储在Git中，它们被排除在.gitignore中，但是我猜您是在忽略文件之前提交了它。 您可以安全地删除那些本地提交，这样它们就不会存储在Git中，然后运行“ npm install”将它们恢复到本地。