使用反应形式方法更新表中的值

Question

举个简单的例子有点困难...

我显示了一个模型及其价格，并且在表格中有一个编辑按钮，当我单击编辑按钮时，将显示一个模态来修改价格。

在模态中，有一个输入和一个验证按钮，在输入中，显示初始价格。我设法通过Reactive Forms的Get SetValue方法显示了初始价格。

问题是，当我修改价格并验证价格时，它会显示在包含初始价格的表中。

这里有一些截图说明了问题：

HTML Code : 

    <table class="table table-dark mb-3">
    <thead>
      <tr>
        <th scope="col">Modèles</th>
        <th scope="col">Prix Unitaire ( U )</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody *ngFor="let modele of modeles; let i = index">
      <tr>
        <td>Model {{ modele.idModele }} ( {{ modele.modele }} )</td>
        <td>{{ modele.prix }} €</td>
        <td>
          <a
            class="btn btn-outline-light"
            (click)="editPrixModele(i)"
            data-toggle="modal"
            data-target="#modalPrixModele"
          >
            <i class="far fa-edit"></i
          ></a>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Modal Edition Prix Model Start -->

  <div
    class="modal fade"
    id="modalPrixModele"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalPrixModele">Edition Du Prix :</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form [formGroup]="prixModeleForm">
            <label for="prixModele">Prix Modele : </label>
            <input
              type="text"
              class="form-control"
              placeholder="Entrer le Prix : ( € )"
              formControlName="prixModele"
            />
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Fermer
          </button>
          <button
            type="button"
            class="btn btn-primary"
            (click)="validatePrixModele()"
          >
            Enregistrer
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Edition Prix Model End -->



TS File : 



export class PrixOptionsComponent implements OnInit {
  modeles = [];
  travaux = [];
  batiments = [];
  nbrEtages = [];
  chargeNominale = [];
  nbrPersonnes = [];
  dimensionCabine = [];

  prixModeleForm: FormGroup;

  constructor(
    private prixOptionsService: PrixOptionsService,
    private formbuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.prixOptionsService.getModeles().subscribe(
      (data: any) => {
        this.modeles = data;
      },
      (error) => {
        console.error(error);
      },
      () => {
        console.log("observable modele success");
      }
    );
    this.initPrixModeleForm();
  }

  initPrixModeleForm() {
    this.prixModeleForm = this.formbuilder.group({
      prixModele: [""],
    });
  }

  editPrixModele(index) {
    console.log(this.modeles[index]);
    this.prixModeleForm.get("prixModele").setValue(this.modeles[index].prix);
  }

提前谢谢您，

Answer 1

<a
   class="btn btn-outline-light"
   (click)="editPrixModele(modele)"
   data-toggle="modal"
   data-target="#modalPrixModele"
  >
    <i class="far fa-edit"></i>
</a>

我会将这个模型保留在属性editModele中：

export class PrixOptionsComponent implements OnInit {
  ...
  editModele: any = null;
  ...
}

所以我们需要更改editPrixModele函数：

editPrixModele(modele) {   
  this.editModele = modele;
  this.prixModeleForm.get("prixModele").setValue(this.editModele);

}

最后，在validateForm函数中：

validatePrixModele() {
   // Check here, if value is correct ....

   this.editModele.prix = this.prixModeleForm.value.prixModele;
   this.editModele = null;

   //Close your modal ....

   this.prixModeleForm.reset();
}