Angular中如何通过HTML下拉框正确设置对象类型category的id字段？

问题分析 #

你的下拉框通过value="{{category.id}}"绑定了分类ID，但Angular的ngModel会把这个值直接赋值给category字段——可你的Booking接口里category是包含id和name的对象，所以提交表单时，category字段被设成了ID的数值/字符串，而非预期的Category对象，进而导致后端识别错误。

解决方案 #

有两种实用方法可以解决这个问题：

方法一：用[ngValue]绑定完整Category对象 #

直接在option上绑定整个Category对象，让ngModel直接获取包含id和name的完整对象：

修改HTML下拉框代码：

<select type="text" [(ngModel)]="selectedCategory" name="category" class="custom-select" id="category">
   <option [ngValue]="null" selected>wähle...</option>
   <option *ngFor="let category of categories" [ngValue]="category">{{category.name}}</option>
</select>

在组件类中定义变量：

selectedCategory: Category | null = null;

修改创建Booking的函数，把选中的对象赋值给Booking的category字段：

public createBooking(addBookingForm: NgForm) {
    // 构造符合要求的Booking数据
    const bookingData = {
      ...addBookingForm.value,
      category: this.selectedCategory
    };
    
    this.bookingService.addBooking(bookingData).subscribe(
      (response: Booking) => {
        console.log(response);
        window.location.reload();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    )
  }

方法二：提交时根据ID匹配对应Category对象 #

如果不想修改下拉框绑定方式，可以在提交表单时，根据选中的ID从categories数组里找到对应的Category对象：

修改创建Booking的函数：

public createBooking(addBookingForm: NgForm) {
    const formValue = addBookingForm.value;
    // 从分类列表中匹配选中ID对应的对象，注意把表单值转成数字
    const selectedCategory = this.categories.find(cat => cat.id === +formValue.category);
    
    const bookingData = {
      ...formValue,
      // 兜底处理：如果没找到对应分类，至少构造含ID的对象
      category: selectedCategory || { id: +formValue.category, name: '' }
    };
    
    this.bookingService.addBooking(bookingData).subscribe(
      (response: Booking) => {
        console.log(response);
        window.location.reload();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    )
  }

说明 #

• 方法一更直观，适合需要完整Category信息的场景；
• 方法二更灵活，适合仅需ID但后端要求对象格式，或不想修改模板的情况。

内容的提问来源于stack exchange，提问作者lu_lu