访问Angular的输入形式，并在其上插入数据

Question

我正在尝试以Angular创建编辑选项，但是我需要的是，当我单击此选定项目的编辑数据发送到表单时，然后以输入形式显示，以编辑它们的能力

是将ID发送到端点，然后使用API​​返回此数据，但是现在我需要以表单显示它，但是我不知道该如何访问输入表单并在其上写入？

这是我的 html 代码：

  <form class="form" [formGroup]="editStudentform">
    <div class="user-box">
      <input name="serialNumber" required="" formControlName="serialNumber" type="number"> invoice.serialNumber
      <label>serial Number</label>
    </div>
    <div class="user-box">
      <input name="status" required="" formControlName="status" type="text">
      <label>status</label>
    </div>
    <div class="user-box">
      <input name="customerSerialNumber" required="" formControlName="customerSerialNumber" type="text">
      <label>customer Serial Number</label>
    </div>
    <div class="user-box">
      <input name="employeeSerialNumber" required="" formControlName="employeeSerialNumber" type="text">
      <label>employee Serial Number</label>
    </div>
    <a routerLink="/invoics" routerLinkActive="active" (click)="editStudent()" type="submit" >

这是mu typescript 代码：

导出类updateIndVoiceComponent在ininit {

  editStudentform: FormGroup = this._formbuilder.group({
    serialNumber : ['' , Validators.required],
    status : ['' , Validators.required],
    customerSerialNumber : ['' , Validators.required],
    employeeSerialNumber : ['' , Validators.required]

  });
  id :number = -1;
  constructor(private _formbuilder: FormBuilder,
    private _http: HttpClient,
    private route:ActivatedRoute
    ) { }
    invoice : any;

  ngOnInit(): void {
   this.id = this.route.snapshot.params['id'];
   this._http
   .get('http://localhost:8085/invoice/get-invoice/'+this.id)
   .subscribe((response: any) => {
     this.invoice = response;
   });

// i think i should write smth here
  }

  editStudent(){
    let serialNumber = this.editStudentform.get('serialNumber')?.value;
    let status = this.editStudentform.get('status')?.value;
    let customerSerialNumber = this.editStudentform.get('customerSerialNumber')?.value;
    let employeeSerialNumber = this.editStudentform.get('employeeSerialNumber')?.value;

    let url = "http://localhost:8085/invoice/update/";
    let obj = {serialNumber:serialNumber , status:status , customerSerialNumber:customerSerialNumber,employeeSerialNumber:employeeSerialNumber}
    this._http.put(url,obj).subscribe(data=>{console.log(data)
    alert("row edited");
    })

  }

}

postman中的此API响应示例：

Answer 1

首先，您应该为发票创建一个类/接口，并且不要使用任何IFF，

而不是在订阅中可以做类似的事情。

this.editStudentForm.patchValue({
 serialNumber : response.serialNumber,
status : response.status
customerSerialNumber : response.costumerSerialNumber : 
employeeSerialNumber : response.employeeSerialNumber 
})