Angular调用API获取躺椅数据 勾选后无法绑定完整对象提交问题

问题根因 #

你当前的复选框仅绑定了躺椅的id作为值，存入FormArray的只有选中的id列表，自然无法获取到包含zone、type属性的完整躺椅对象。

修改步骤 #

1. 调整模板层复选框的事件传参
   修改add-edit.component.html的复选框代码，不要仅传事件对象，直接把当前遍历到的完整躺椅对象和选中状态传入处理方法：

<form [formGroup]="reservationForm" (ngSubmit)="onSubmit()">
  <div>
    <div *ngFor="let lounger of loungersFromApi; let i=index">
      <label>
        <input type="checkbox" (change)="onCheckboxChange($event.target.checked, lounger)" />
        {{lounger.id}} - 区域：{{lounger.zone}} - 类型：{{lounger.type}}
      </label>
    </div>
  </div>
  <!-- 其他表单字段、提交按钮代码保持不变 -->
</form>

2. 重写复选框变化的处理逻辑
   修改add-edit-component.ts中的onCheckboxChange方法，直接操作完整躺椅对象存入表单：

onCheckboxChange(isChecked: boolean, selectedLounger: Lounger) {
  const loungers: FormArray = this.reservationForm.get('loungers') as FormArray;

  if (isChecked) {
    // 直接将完整的躺椅对象存入FormControl
    loungers.push(new FormControl(selectedLounger));
  } else {
    // 根据唯一id匹配要移除的躺椅
    const removeIndex = loungers.controls.findIndex(item => item.value.id === selectedLounger.id);
    if (removeIndex !== -1) {
      loungers.removeAt(removeIndex);
    }
  }
}

3. 提交时直接读取表单值即可
   修改后reservationForm中的loungers字段已经是完整的躺椅对象数组，直接赋值给预约模型提交即可，参考onSubmit写法：

onSubmit() {
  this.submitted = true;
  if (this.reservationForm.invalid) {
    return;
  }
  this.loading = true;
  // 直接读取表单值即可拿到符合要求的预约对象
  const reservationData: Reservation = this.reservationForm.value;
  console.log('待提交的预约数据', reservationData);

  // 后续调用接口的逻辑保持原有写法不变
  if (this.isAddMode) {
    this.reservationService.create(reservationData)
      .pipe(first())
      .subscribe({
        next: () => {
          this.alertService.success('预约创建成功', { keepAfterRouteChange: true });
          this.router.navigate(['../'], { relativeTo: this.route });
        },
        error: err => {
          this.alertService.error(err);
          this.loading = false;
        }
      })
  } else {
    // 编辑场景逻辑保持不变
  }
}

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