Angular2英雄之旅教程調用nodejs後端

我建造於https://angular.io/docs/ts/latest/tutorial/英雄之旅。Angular2英雄之旅教程調用nodejs後端

完整的教程工作正常，我做了一個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; 
     }); 
    } 

}

當添加一個英雄，則數組被與一個空項目填入，並且控制檯顯示以下錯誤：

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

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

我懷疑這個錯誤是由於快速的新的後端isen't發送新創建的英雄值回了客戶端添加到數據庫後，因爲angular-in-memory-api這樣做，但我不知道是否是這種情況。我一直在玩它一段時間沒有任何運氣。

任何想法？

來源

2016-12-25 Tony

嘗試像這樣使用安全導航操作符（？）'{{hero？.id}}' – echonax

這會導致瀏覽器控制檯不顯示錯誤，但添加的元素在列表中仍爲空（後端處理它罰款，但將其添加到數據庫）。 – Tony

'.then（hero => {console.log（hero）; ..'logs？ – echonax

正如我們在評論部分討論的那樣。您從後端獲得的價值並不像您預期的那樣。

因此，安全導航操作員（?）不打印任何與{{hero?.id}}任何東西。

來源

2016-12-25 20:53:27 echonax

Angular2英雄之旅教程調用nodejs後端

回答

相關問題