ヒーローズチュートリアルAngular2ツアーnodejsバックエンド

Question

私はヒーローのツアーに建物https://angular.io/docs/ts/latest/tutorial/からビルドしています。

完全なチュートリアルは正常に動作し、私はバックエンドを処理するnodejs APIを作成しました。 現時点では、ヒーローフロントエンドのツアーでヒーローの完全なリストを取得したり、ヒーローを見たり、ヒーローを更新したり、ヒーローを削除したりすることができます。

私の問題は、私がヒーローを追加しようとしているときです。 これを行うためのnodejsコードは次のようになります。

function createBox(req, res, next) { 
    req.body.age = parseInt(req.body.age); 
    db.none('insert into boxes(name, description)' + 
     'values(${name}, ${description})', 
     req.body) 
     .then(function() { 
     res.status(200) 
      .json({ 
      status: 'success', 
      message: 'Inserted one box' 
      }); 
     }) 
     .catch(function (err) { 
     return next(err); 
     }); 
    } 

英雄の追加を扱う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; 
     }); 
    } 

} 

ヒーローを追加し、アレイは、1つの空のアイテムが取り込まれ、コンソールは、次のエラーを示します：heroes.component.htmlで

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

線14の周りのコードは、Tのように見えます彼：

<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}} 

そのバック新しく作成された英雄の値を送信するisen't新しいバックエンドクライアントはangular-in-memory-apiのようにそれをデータベースに追加した後、私はそれが事実かどうかわからない。私は幸運なことなしにしばらくそれを持って遊んでいます。

アイデア？

Answer 1

コメント欄で説明したとおりです。バックエンドからのあなたの価値はあなたが期待したとおりには来ていません。

したがって、安全ナビゲーションオペレーター（?）は{{hero?.id}}で何も印刷しません。