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

}

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

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会这样做，但是我不知道是不是这样。我一直在玩它一段时间没有运气。

有什么想法吗？

Answer 1

正如我们在评论部分所讨论的那样。您的后端价值未达到您预期的水平。

因此，安全导航操作员（public void setColor(String name, LinearLayout linlay){ switch (name){ case "Sinema": linlay.setBackgroundResource(R.color.sinema); break; case "Piknik": linlay.setBackgroundResource(R.color.piknik); break; case "Futbol": linlay.setBackgroundResource(R.color.futbol); break; case "Gezi": linlay.setBackgroundResource(R.color.gezi); break; case "Yemek": linlay.setBackgroundResource(R.color.yemek); break; case "Sohbet": linlay.setBackgroundResource(R.color.sohbet); break; case "Cay": linlay.setBackgroundResource(R.color.cay); break; case "Toplantı": linlay.setBackgroundResource(R.color.sinema); break; default: linlay.setBackgroundResource(R.color.genel); break; } }）不会使用?打印任何内容。

Angular2游览英雄教程调用nodejs后端

1 个答案: