需要在相同的 bootstrap 模型中使用 put 和 post，但只能使用 post 工作

问：

我正在处理一个项目，需要在 Angular 13 中实现 NGB Bootstrap 模态，并在同一模型上完成 put 和 post 的操作，但是当我单击编辑按钮时，它会加载数据并创建新对象而不是更新旧对象。卡在过去 3 天

服务.ts

 addSource(source : sources[]): Observable<sources[]>{
      return this.http.post<sources[]> (this.API_URL, source).pipe(
      tap(() => {
        this._refreshrequired.next();
      })
    );
      //console.log(user);
      }

组件.ts

import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { sources } from '../sources';
import { SourcesService } from '../sources.service';
import { FormGroup, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import {SourcesComponent} from '../sources/sources.component';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-source',
  templateUrl: './add-source.component.html',
  styleUrls: ['./add-source.component.css']
})
export class AddSourceComponent implements OnInit {
   // a form for entering and validating data
//    sourceForm = new FormGroup({
//     name : new FormControl('', Validators.compose([Validators.required, Validators.minLength(5)])),
//     url : new FormControl('', Validators.compose([Validators.required])),
// //     client : new FormControl(),
//   });


  constructor(private sourcesService: SourcesService, private modalService: NgbModal) { this.saveSource();

      this.sourcesService.Refreshrequired.subscribe(result=>{
        this.saveSource();
      });
    }

  @ViewChild('content') addview !: ElementRef


  ngOnInit(): void {
      }

  errormessage = '';
  errorclass = '';
  saveresponse: any;
  source: any;
  editdata: any;

//   destdata:any;

 sourceForm = new FormGroup({
      id: new FormControl({value:0, disabled:true} ),
      name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(5)])),
      url: new FormControl('', Validators.compose([Validators.required])),
//     client : new FormControl(),
  });

//   sourceData_post: any;
  saveSource(){
      if(this.sourceForm.valid){
       console.log(this.sourceForm.getRawValue());
          this.saveresponse = this.sourceForm.getRawValue();
          this.sourcesService.addSource(this.saveresponse).subscribe(result => {
              this.saveresponse = result;
              console.log(this.saveresponse)
              this.errormessage = "Saved Sucessfully";
              this.errorclass = "sucessmessage";
              setTimeout(()=>{
                  this.modalService.dismissAll();
              },1000)
          });

      }else{
          this.errormessage = "Please enter valid data";
          this.errorclass = "errormessage";
      }
//       this.modalService.dismissAll()
  }


  LoadEditData(source: any) {
      this.open();
      this.sourcesService.GetSourcebyid(source).subscribe(result => {
          this.editdata = result;
          console.log(this.editdata)
          this.sourceForm.setValue({id:this.editdata.id, name:this.editdata.name,url:this.editdata.url});
      });
  }


  Clearform(){
      this.sourceForm.setValue({id:0, name:'',url:''})
  }

  open() {
      this.Clearform();
      this.modalService.open(this.addview,{ ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      }, (reason) => {
      });
  }

  private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
          return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
          return 'by clicking on a backdrop';
      } else {
          return `with: ${reason}`;
      }
  }

  get name() {
      return this.sourceForm.get("name");
  }
  get url() {
      return this.sourceForm.get("url");
  }

}

组件.html

<div class="modal" role="dialog">
<ng-template #content let-modal>
  <div class="modal-content" style="z-index: 1056">
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Source Form</h4>
        <button type="button" #closebtn class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body">
      <form method="post" [formGroup]="sourceForm" (ngSubmit)="saveSource()">

         <div class="mb-3">
           <label>Id:</label>
           <div class="input-group">
             <input name="id" class="form-control" formControlName="id">
           </div>
<!--           <span *ngIf="name && name.invalid" class="errormessage">Please Enter valid name</span>-->
         </div>


        <div class="mb-3">
           <label>Source Name:</label>
           <div class="input-group">
             <input name="name" class="form-control" formControlName="name" required>
           </div>
           <span *ngIf="name && name.invalid" class="errormessage">Please Enter valid name</span>
         </div>

         <div class="mb-3">
           <label>Source URL:</label>
           <div class="input-group">
             <input name="url" class="form-control" formControlName="url">
           </div>
           <span *ngIf="url && url.invalid" class="errormessage">Please Enter valid url</span>
         </div>

          <div class="mb-3">

            <div class="input-group">
              <button [disabled]="sourceForm.invalid" type="submit" class="btn btn-primary">Save</button>
            </div>
            <span [ngClass]="errorclass" >{{errormessage}}</span>
        </div>
      </form>
      </div>
    <div class="modal-footer">
        <button style="display: none;" type="button" class="btn btn-outline-dark"
            (click)="modal.close('Save click')">Save</button>
    </div>
  </div>
</ng-template>
</div>
<button class="btn btn-primary" #popupbtn id="popupbtn" (click)="open()">Add New</button>