如何在不使用“id”的情况下更新角度记录输入法

Question

我正在使用 Angular、Angular Material、SpringBoot 开发移动充值网站，此代码供管理员使用，管理员可以更新网站中的计划。问题出在编辑选项上。单击编辑中的更新按钮后，它不会更新值，而是创建新计划。请参阅下面的输出图像以了解详情。

update.ts

    import { Component, Inject, OnInit } from '@angular/core';
    import { FormGroup,FormBuilder,Validators } from '@angular/forms';
    import { AdminApiService } from '../services/admin-api.service';
    import{ MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog'
    
    @Component({
      selector: 'app-add-plan',
      templateUrl: './add-plan.component.html',
      styleUrls: ['./add-plan.component.css']
    })
    export class AddPlanComponent implements OnInit {
      PlanDetails !: FormGroup;
      actionBtn : string ="Save";
      constructor(private formBuilder:FormBuilder,
        private api: AdminApiService,
        private dialogRef: MatDialogRef<AddPlanComponent>,
        @Inject(MAT_DIALOG_DATA) public editData: any) { }
      
    
    
      
      ngOnInit(): void {
        this.PlanDetails = this.formBuilder.group({
          planName:['',Validators.required],
          planPrice:['',Validators.required],
          planType:['',Validators.required],
          planOffers:['',Validators.required],
          planValidity:['',Validators.required],
          planDescription:['',Validators.required]
        });
    
        if(this.editData){
          this.actionBtn="Update";
          this.PlanDetails.controls['planName'].setValue(this.editData.planName);
          this.PlanDetails.controls['planPrice'].setValue(this.editData.planPrice);
          this.PlanDetails.controls['planType'].setValue(this.editData.planType);
          this.PlanDetails.controls['planOffers'].setValue(this.editData.planOffers);
          this.PlanDetails.controls['planValidity'].setValue(this.editData.planValidity);
          this.PlanDetails.controls['planDescription'].setValue(this.editData.planDescription);
        }
    
      }
    
      addPlan(){
        if(!this.editData){
          if(this.PlanDetails.valid){
            this.api.postPlan(this.PlanDetails.value)
            .subscribe({
              next:(res)=>{
                alert("product added succesfully");
                this.PlanDetails.reset();
                this.dialogRef.close('save');
              },
              error:()=>{
                alert("Error while adding the plan")
              }
            });
        }
        }else{
          this.updatePlan()
        }
      }
      
      updatePlan(){
        this.api.putPlan(this.PlanDetails.value)
        .subscribe({
          next:(res)=>{
            this.PlanDetails.reset();
            this.dialogRef.close('update');
          },
          error:()=>{
            alert("error on update");
          }
        })
        
      }
    
    }

api.service.ts

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { environment } from 'src/environments/environment';
    
    @Injectable({
      providedIn: 'root'
    })
    export class AdminApiService { 
      private apiServerUrl=environment.apiBaseUrl;
      
      constructor(private http : HttpClient) { }
      
      postPlan(data: any){
        return this.http.post<any>(`${this.apiServerUrl}/admin-plan/add`,data);
      }
      getPlan(){
        return this.http.get<any>(`${this.apiServerUrl}/admin-plan/all`);
      }
      putPlan(data:any){
        return this.http.put<any>(`${this.apiServerUrl}/admin-plan/update`,data);
      }
      deletePlan(id:number){
        return this.http.delete<any>(`${this.apiServerUrl}/admin-plan/delete/`+id);
      }
    
    
      
    }

image1< /a>

image2

请参考输出图像。当我将价格从 399 编辑到 39 时，它不是更新价格，而是在输出中添加新行。

谁能告诉我如何使用 Angular 更新特定值，而不创建新行。

如何在 put 方法中不使用“id”的情况下以角度更新记录

Postman 截图。我已将价格从 200 更新为 201。效果很好。

Answer 1

将 id 与表单值一起传递

updatePlan() {
    this.api.putPlan({ id: this.editData.id, ...this.PlanDetails.value })
        .subscribe({
            next: (res) => {
                this.PlanDetails.reset();
                this.dialogRef.close('update');
            },
            error: () => {
                alert("error on update");
            }
        })
}