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

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

从下面的代码中，我了解到您正在尝试删除酒店但没有将其传递给删除函数，因为它有酒店列表，并且您正在尝试删除您没有传递给该函数的酒店因为它显示未定义

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

删除酒店（）：无效{ }

而不是使用下面的代码

<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() 然后添加 delete hotel 时，它起作用了。

这是 getHotel 方法：

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

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

How to delete and update specific item in angular

get

put

typescript

angular