Update Service Component array value from my component

Question

I have a service component that contains an array of data.

I connected it with my component with the observables.

The problem is that when I modify the service component table from my component, the modifications are successful, but I always have a new isolated field called "undefined" with the same modified value.

TS Component Service :

export class PrixOptionsService {
  modeles = [
    {
      idModele: 1,
      modele: "Bianca",
      prix: 500,
    },
    {
      idModele: 2,
      modele: "Hattusas",
      prix: 600,
    },
    {
      idModele: 3,
      modele: "Victoria",
      prix: 700,
    },
    {
      idModele: 4,
      modele: "Face To Face",
      prix: 500,
    },
    {
      idModele: 5,
      modele: "Gold",
      prix: 600,
    },
    {
      idModele: 6,
      modele: "Dara",
      prix: 700,
    },
  ];

 setPrixModele(modele, index) {
    this.modeles[index] = modele;
  }
}

My TS Component :

export class PrixOptionsComponent implements OnInit {

  modeles = [];

  editModele: any = null;

  indexToUpdate;

  editPrixModele(modele, index) {
    this.editModele = modele;
    this.prixModeleForm.get("prixModele").setValue(this.editModele.prix);
    console.log(this.modeles[index]);
  }
  validatePrixModele() {
    this.editModele.prix = this.prixModeleForm.value.prixModele;
    this.prixOptionsService.setPrixModele(
      this.editModele.prix,
      this.indexToUpdate
    );
    console.log(this.prixOptionsService.modeles);
  }

Html:

<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(modele, 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="number"
              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 -->

When I run it, I got this " Undefined " field :

1: The new Update of the value. 2: The Undefined Field.

Thank you in advance.

Answer 1

The undefined entry results in the not set variable indexToUpdate. So you just need to set the variable in editPrixModele:

editPrixModele(modele, index) {
  this.editModele = modele;
  this.prixModeleForm.get("prixModele").setValue(this.editModele.prix);
  console.log(this.modeles[index]);
  this.indexToUpdate = index; // <- This was missing
}

The model is updated automatically, because you're editing the object, which is referenced there. You're working on the same object reference. So you don't need to reassign the object to the index. You only need this, if you want to add a new object.

Also you should consider to edit the other function as well, so you set the object at the respective index and not just the value:

validatePrixModele() {
  this.editModele.prix = this.prixModeleForm.value.prixModele;
  this.prixOptionsService.setPrixModele(
    this.editModele, // Use the object here
    this.indexToUpdate
  );
  console.log(this.prixOptionsService.modeles);
}