Question

我创建了一个反应式表单来创建数据并将其插入数据库。但是问题是如果我要编辑一行，首先我必须在路由模块中创建一条路由并为其指定方向（例如path: 'patient/:id', component: PatientComponent。这里/ Patient是我的主页）。其次，当我单击“编辑”按钮时，它会加载包含相关数据的表单，但是当我单击“提交”按钮时，特定行不会进行编辑，但是带有新$key的新记录会添加到表中。

enter image description here

这是我的组件代码：

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>

我希望通过单击“编辑”按钮表单不加载（忽略/patient/{{patient.$key}}）并提交修改后的数据到数据库中。

谢谢...

Answer 1

我的第一个猜测是检查您要致电的地方的服务

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

使用PUT方法吗？

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

1 个答案: