Angular 6英雄教程：如何在HTTP POST Observable中添加描述属性

没问题，咱们一步步调整代码，就能实现添加英雄时传入新的description属性了：

1. 更新模板，添加描述输入框 #

首先得在heroes.component.html里加一个输入框，让用户能输入英雄的描述，同时修改按钮的点击事件，把描述的值也传进去：

<div>
  <label>Hero name: <input #heroName /></label>
  <!-- 新增英雄描述输入框 -->
  <label>Hero description: <input #heroDescription /></label>
  <button 
    (click)="add(heroName.value, heroDescription.value); heroName.value=''; heroDescription.value=''"
  > 
    add 
  </button>
</div>

2. 修改组件的add方法，接收并传入描述参数 #

接下来在heroes.component.ts里，把add方法的参数改成接收name和description，然后在调用addHero的时候把描述也包含到Hero对象里：

add(name: string, description: string): void {
  name = name.trim();
  description = description.trim(); // 去除首尾空格，和name的处理保持一致
  if (!name) { return; } // 这里可以根据需求调整，如果允许空描述就不用额外判断

  this.heroService.addHero({ name, description } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}

3. 确认服务层无需修改 #

你的hero.service.ts里的addHero方法已经是接收Hero类型参数，并且通过http.post把整个对象发送给服务器了，所以这部分不需要改动，它会自动把新的description属性一起传递过去。

这样调整之后，当用户点击add按钮时，就能把输入的名称和描述一起发送到后端，完成带描述的英雄创建啦～

内容的提问来源于stack exchange，提问作者Ventura8