如何在SpringBoot / Angular4中执行预订功能？

Question

我是SpringBoot / Angular4的新手，我现在已经停留了几天功能，我希望有人能帮助我。

所以这就是事情： 我有一个实体Reservation （英语预订）和一个实体Voyage （英语旅行） Reservation班级有外键（Voyage_id）。所以我想预订旅行（OneToMany制图），但我对如何操作感到困惑。

这是SpringBoot中Reservation的控制器

@RequestMapping(value = "/postReservation/{id}", method = RequestMethod.POST)
    public ResponseEntity<Reservation> createReservation(@PathVariable("id") int id, @RequestBody Reservation newReservation) {
        Reservation reservData = reservationRepository.findOneVoyageBy(id);
        reservData.setVoyage_id(newReservation.getVoyage_id());

        Reservation reservDone = reservationRepository.save(reservData);
        return new ResponseEntity<>(reservDone, HttpStatus.OK);

        //return new ResponseEntity<Reservation>(reservationservices.save(newReservation), HttpStatus.CREATED);
    }

我在Angular 4中的服务类：

@Injectable()
export class ReservationService {
  private headers = new Headers({'Content-Type': 'application/json'});
  private options = new RequestOptions({headers: this.headers});

  constructor(private http: Http) { }

  createReservation(id: number, value: any):Observable<Object> {
    return this.http.post(AppComponent.API_URL + '/reservation/postReservation' + id, value)
      .map(resp => resp.json());
  }

我的Component.ts功能：

save(reserv){
    this.reservationService.createReservation(reserv.id,
    {
      voyage: reserv.voyage
    }).subscribe(data => {
      console.log(data);
      reserv = data as Reservation;
    }, (error) => {
      console.log(error);
    });
  }

为了清楚地解释我想要的内容，您将在下面的输出中看到可用的 Voyages（Travels）列表。当我点击我用红色圆圈的按钮时，我想在Reservation班级中坚持我点击的旅行的id。

所以这是我的问题。希望我已经说清楚了，我希望你们能帮助我。

编辑：综上所述，当我点击按钮时，它会告诉我类似

的内容

Cannot read property 'id' of undefined

我对此的理解是它无法检索我点击的旅行的id。

提前致谢