Angular2游览英雄教程调用nodejs后端(Angular2 tour of heroes tutorial calling nodejs backend)

我是在https://angular.io/docs/ts/latest/tutorial/的英雄之旅的基础上建立的。

完整的教程工作正常，我已经使用nodejs api来处理后端。此刻我有一个工作后端，英雄前端之旅可以打电话来检索完整的英雄列表，看到英雄，更新英雄并删除英雄。

我的问题是，当我试图添加英雄时。用于执行此操作的nodejs代码如下所示：

处理添加英雄的heroes.component.ts中的方法如下所示：

add(name: string, description: string): void { name = name.trim(); description = description.trim(); if (!name) { return; } this.heroService.create(name,description) .then(hero => { this.heroes.push(hero); this.selectedHero = null; }); } }

添加英雄时，数组将填充一个空项，控制台显示以下错误：

EXCEPTION： http : //192.168.4.13 :3001/app/heroes/heroes.component.html:14:24引起的错误：无法读取未定义的属性'id'

heroes.component.html第14行的代码如下所示：

<ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} {{hero.description}} <button class="delete"(click)="delete(hero); $event.stopPropagation()">x</button> </li> </ul>

第14行是这一行：

<span class="badge">{{hero.id}}</span> {{hero.name}} {{hero.description}}

我怀疑这个错误是由于新后端在将它添加到数据库之后没有将新创建的英雄的值发送回客户端的速度很快，因为angular-in-memory-api ，但我不知道是不是这样的话。我一直玩弄它一段时间没有任何运气。

有任何想法吗？

I'am building upon the tour of heroes from https://angular.io/docs/ts/latest/tutorial/.

The complete tutorial works fine and I've made a nodejs api to handle the backend. At the moment I have a working backend that the tour of heroes frontend can call to retrieve a complete list of heroes, see a hero, update a hero and delete a hero.

My problem is, when I'am trying to add a hero. The nodejs code for doing this looks like this:

The method in the heroes.component.ts that handles the adding of a hero looks like this:

add(name: string, description: string): void { name = name.trim(); description = description.trim(); if (!name) { return; } this.heroService.create(name,description) .then(hero => { this.heroes.push(hero); this.selectedHero = null; }); } }

When adding a hero, the array gets populated with one empty item, and the console shows the following error:

EXCEPTION: Error in http://192.168.4.13:3001/app/heroes/heroes.component.html:14:24 caused by: Cannot read property 'id' of undefined

The code around line 14 in the heroes.component.html looks like this:

<ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} {{hero.description}} <button class="delete"(click)="delete(hero); $event.stopPropagation()">x</button> </li> </ul>

line 14 is this line:

<span class="badge">{{hero.id}}</span> {{hero.name}} {{hero.description}}

I suspect that the error is due to the fast that the new backend isen't sending the value of the newly created hero back the the client after adding it to the database, as the angular-in-memory-api does it, but I don't know if thats the case. I have been playing around with it for a while without any luck.

Any ideas?