Как удалить и обновить определенный элемент в угловых

Question

Я подключил свое приложение реагирующей формы к REST API, и когда я пытаюсь удалить отель, он показывает мне. Действительно удалить отель: (не определено)? он не видит идентификатор кликаемого отеля, в чем проблема моего кода? как я могу это исправить

Это функция удаления:

    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()

    );
    }
   }
   }

и вот форма .html:

  <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

это работает, когда я заменяю deleteHotel () на getHotel (hotel.ID) и добавляю гостиницу для удаления.

это метод getHotel:

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

Answer 2

из приведенного ниже кода я понял, что вы пытаетесь удалить отель, но не передаете его в функцию удаления, поскольку в ней есть список отелей, и вы пытаетесь удалить один отель, который не был добавлен в функцию из-за который он показывает undefined

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

deleteHotel (): void { }

вместо этого используйте ниже код

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

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

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

    );
    }
   }
   }