How to delete and update specific item in angular

Question

I have connect my reactive form app with REST API, and when I try to delete hotel it show me Really delete the Hotel: (undefined)? it does not see the id of clicked hotel, what is the problem of my code? how I can fix it

This is the delete function:

    deleteHotel(): void {
    if (this.hotel.ID === 0) {
    // Don't delete, it was never saved.
    this.onSaveComplete();
     } else {
    if (confirm(`Really delete the Hotel: ${this.hotel.hotelName}?`)) {
    this.hs.deleteHotel(this.hotel.ID)
    .subscribe(
      () => this.onSaveComplete()

    );
    }
   }
   }

and here is the .html form:

  <form  (ngSubmit)="onSubmit(rHotelForm)" [formGroup] = "rHotelForm">
  <input type="hidden" formConrolName="id"/>
<div class="form-group">
    <div class="form-group col-md-6">
      <label >Hotel Name</label>
      <input id="hotelNameId" class="form-control" type="text" 
     formControlName="hotelName"/>

    </div> 



    <div class="form-group">
        <div class="form-group col-md-6">
          <label >Phone</label>
          <input class="form-control"formControlName="phone">
        </div> </div>


                <div class="form-group">
                    <div class="form-group col-md-6">
                      <label >Number of rooms</label>
                      <input class="form-control" formControlName="numberOfRooms" >
                    </div> </div>

                      <div class=" col-md-6">
                        <button  type="submit" class="btn btn-lg btn-block btn-info" [disabled] ="!rHotelForm.valid">Submit</button>
                      </div> 
                      <div class=" col-md-6">
                          <button class="btn btn-lg btn-block btn-secondary" (click) ="resetForm(hotelForm)">Reset</button>
                        </div> 






</form> 
<br> Value : {{rHotelForm.value | json}}
  <form [formGroup] = "hotelForm">

   <ul><li *ngFor="let hotel of hotels">

    <span>
        <a class="btn" (click)="deleteHotel()">
        Hotel ID :{{hotel.ID}} Hotel Name : {{hotel.hotelName}} 
   </a>
      </span>

</li></ul>
<button class="btn btn-lg btn-block btn-secondary" (click) 
 ="deleteHotel(hotel.ID)">Delet Hotel</button>
  </form>

Answer 1

it's work when I replace deleteHotel() by getHotel(hotel.ID) then add a delete hotel .

this is the getHotel method:

    getHotel(id: number) {
 this.hs.getHotel(id).subscribe(
hotel => this.hotel = hotel,
  );
  }