与在Angular 7中创建和编辑数据的表单相同

Question

我已经创建了一个反应式表单来创建数据并将其插入到数据库中，但我在编辑行时遇到了问题。首先，我必须在路由模块中创建一条路由，并给出它的方向(如path: 'patient/:id', component: PatientComponent。这里的/patient是我的主页)。

其次，当我单击编辑按钮时，它会加载包含相关数据的表单，但当我单击提交按钮时，特定行不会进行编辑，而是会将具有新$key的新记录添加到表中。

我想单击编辑按钮和不加载的表单(省略/patient/{{patient.$key}})，当我单击提交按钮时，它应该会修改数据库中的数据。

谢谢..。

​

​

下面是我的组件代码：

patientIdUpdate = null; 

ngOnInit() {  
    this.updatePatientData();
    const id = this.actRoute.snapshot.paramMap.get('id'); 
    this.crudApi.GetPatient(id).valueChanges().subscribe(data => {
    this.patientForm.setValue(data)
    })

    this.crudApi.GetPatientsList();
    this.patientsForm(); 
    this.dataState();
    let s = this.crudApi.GetPatientsList(); 
    s.snapshotChanges().subscribe(data => {
      this.Patient = [];
      data.forEach(item => {
        let a = item.payload.toJSON(); 
        a['$key'] = item.key;
        this.Patient.push(a as Patient);
      })
    })
  }

dataState() {     
    this.crudApi.GetPatientsList().valueChanges().subscribe(data => {
      this.preLoader = false;
      if(data.length <= 0){
        this.hideWhenNoPatient = false;
        this.noData = true;
      } else {
        this.hideWhenNoPatient = true;
        this.noData = false;
      }
    })
  }

submitPatientData(patient: Patient) {
    if(this.patientIdUpdate == null) {
    this.crudApi.AddPatient(this.patientForm.value);
    this.router.navigate(['patient']);
    this.ResetForm();
    } else {
    patient.$key = this.patientIdUpdate
    this.crudApi.UpdatePatient(this.patientForm.value);  
    this.router.navigate(['patient']);
    this.ResetForm();    
    }

   };

下面是我的标记代码：

<form [formGroup]="patientForm" (ngSubmit)="submitPatientData()">

<tr *ngFor="let patient of Patient | paginate: { itemsPerPage: 7, currentPage: p }; let i = index;">
              <td class="text-center action-block">
                  <button type="button" class="btn btn-info"><i class="fa fa-pencil-square-o" routerLink="/patient/{{patient.$key}}"></i></button>
                  <button type="button" class="btn btn-danger"><i class="fa fa-trash-o" (click)="deletePatient(patient)"></i></button></td>
              <td>{{patient.FirstName}} {{patient.LastName}}</td>
              <td>{{patient.FatherName}}</td>
              <td>{{patient.Address}}</td>
              <td>{{patient.NC}}</td>
              <td>{{patient.Mobile}}</td>
              <td>{{patient.Date}}</td>
              <td>{{patient.Reason | number}}</td> 

Answer 1

我的第一个猜测是检查您调用的服务

this.crudApi.UpdatePatient(this.patientForm.value);

它是否在使用PUT方法？