http - 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必须正常工作，因为我能够查看英雄和正在查看英雄的仪表板。。。只有在查看英雄详细信息时，这对我来说没有意义，因为我从未更改过我能想到的英雄细节方法。)

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





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

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

Update hero details

We can edit a hero's name already in the hero detail view. Go ahead and try it. As we type, the hero name is updated in the view heading. But when we hit the Back button, the changes are lost!

Updates weren't lost before, what's happening? When the app used a list of mock heroes, changes were made directly to the hero objects in the single, app-wide shared list. Now that we are fetching data from a server, if we want changes to persist, we'll need to write them back to the server.

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

显示我可以访问其他组件的数据(没有错误):

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”将它们恢复到本地。