我遇到了一个Angular应用程序的问题，我试图向我的服务器发送一个PUT请求，但我得到了错误消息“Required request body is missing”。
下面是相关的代码片段：
子组件（ChambreFormComponent）：

<div class="h-screen md:flex">
  <div
    class="relative overflow-hidden md:flex w-1/2 bg-gradient-to-tr from-blue-800 to-purple-700 i justify-around items-center hidden"
  >
    >
    <img class="h-40 w-96 mr-40" src="{{ image }}" />
    <div
      class="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
    ></div>
    <div
      class="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
    ></div>
    <div
      class="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
    ></div>
    <div
      class="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
    ></div>
  </div>
  <div class="flex md:w-1/2 justify-center py-10 items-center bg-white">
    <form class="bg-white" (ngSubmit)="onSubmit()">
      <h1 class="text-black font-bold text-2xl mb-1">{{ titre }}</h1>
      <!-- <p class="text-sm font-normal text-gray-600 mb-7">Welcome Back</p> -->
      <div class="flex items-center border-2 py-2 px-3 rounded-2xl mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 text-gray-400"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
            clip-rule="evenodd"
          />
        </svg>
        <input
          class="pl-2 outline-none border-none"
          type="text"
          name=""
          id=""
          [(ngModel)]="formData.numeroChambre"
          placeholder="{{ roomnumber }}"
          [ngModelOptions]="{ standalone: true }"
        />
      </div>
      <div class="flex items-center border-2 py-2 px-3 rounded-2xl mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 text-gray-400"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
          />
        </svg>
        <input
          class="pl-2 outline-none border-none"
          type="text"
          name=""
          id=""
          [(ngModel)]="formData.typeC"
          placeholder="{{ typeRoom }}"
          [ngModelOptions]="{ standalone: true }"
        />
      </div>
      <button
        type="submit"
        class="block w-full bg-indigo-600 mt-4 py-2 rounded-2xl text-white font-semibold mb-2"
      >
        {{buttonText}}
      </button>
    </form>
  </div>
</div>

字符串
.ts

import {
  Component,
  EventEmitter,
  Input,
  Output,
  ViewChild,
} from '@angular/core';
import { ChambreFormUpdateComponent } from '../chambre-form-update/chambre-form-update.component';
@Component({
  selector: 'app-chambre-form',
  templateUrl: './chambre-form.component.html',
  styleUrls: ['./chambre-form.component.css'],
})
export class ChambreFormComponent {
  @Input() image = '';
  @Input() buttonText = '';
  @Input() titre = '';
  @Input() roomnumber = 0;
  @Input() typeRoom = '';
  @Input() formData: any;
  @Output() submitForm = new EventEmitter<any>();
  constructor() {
    console.log('Chambre Form Update titre' + this.titre);
  }
  onSubmit() {
    // Emit the form data when the form is submitted
    this.submitForm.emit();
  }
}

型
父组件（ChambreFormUpdateComponent）：

<app-chambre-form
  [image]="image"
  [titre]="title"
  [buttonText]="buttonText"
  [typeRoom]="type"
  [roomnumber]="roomNum"
  [formData]="updateForm.value"
  (submitForm)="updateRoom(updateForm.value.idChambre, $event)"
></app-chambre-form>`

型
.ts：

import { Component, ViewChild } from '@angular/core';
import { ChambreFormComponent } from '../chambre-form/chambre-form.component';
import { environment } from 'src/environments/environment.development';
import { HttpClient } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
  selector: 'app-chambre-form-update',
  templateUrl: './chambre-form-update.component.html',
  styleUrls: ['./chambre-form-update.component.css'],
})
export class ChambreFormUpdateComponent {
  rooms: any[] = [];
  image = './assets/chambres/updateRoom.png';
  title = 'Update Room';
  buttonText = 'Update Room';
  constructor(
    private http: HttpClient,
    private fb: FormBuilder,
    private router: Router
  ) {
    console.log('valueeeee' + this.updateForm.value);
  }
  updateForm: any = {
    value: {
      numeroChambre: 0,
      typeC: '',
    },
  };
  type = this.updateForm.value.type;
  roomNum = this.updateForm.value.numero;
  updateRoom(roomId: number, updatedRoom: any) {
    const apiUrl = environment.BaseUrl + 'chambre/modifierchambre';
    this.http.put<any>(apiUrl, updatedRoom).subscribe({
      next: (data) => {
        console.log('Room updated successfully:', data);
        const index = this.rooms.findIndex((room) => room.idChambre === roomId);
        if (index !== -1) {
          this.rooms[index] = data;
        }
      },
    });
  }
  openUpdateForm(room: any) {
    room.showUpdateForm = true;
    this.updateForm.value = { ...room };
  }
}

型
当发出PUT请求时，我收到一个“Required request body is missing”错误。我怀疑这个问题可能与我如何处理表单数据或构造请求主体有关。
有人能帮我找出可能导致这个问题的原因吗？我应该如何在我的Angular应用程序中正确构造和发送请求正文？