如何删除和更新角度中的特定项目

Question

我已经将我的反应式表单应用程序与REST API连接，当我尝试删除酒店时，它显示我真的删除了酒店:(未定义）？它没有看到点击酒店的ID，我的代码有什么问题？我怎么解决它

这是删除功能：

    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

从下面的代码我明白你是在试图删除酒店，但没有把它传递到删除功能，因为它有酒店列表，你试图删除一个你没有paas到该功能的酒店，因为它是显示未定义

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

    );
    }
   }
   }

Answer 2

当我用getHotel（hotel.ID）替换deleteHotel（）然后添加一个删除酒店时，它的工作原理。

这是getHotel方法：

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