comment utiliser l'épissure dans angular 5

Question

J'ai créé une table qui affiche les données extraites de la base de données. La partie TS qui récupère les données ressemble à ceci:

this._appService.getVisitData().subscribe((data) => {
  this.checkinTemp = data;
  // Calling the DT trigger to manually render the table
  this.dtTrigger.next();
});

Le tableau est généré et j'ai ajouté une fonction d'édition et de suppression, mon code d'affichage:

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">

  <thead>
  <tr>
    <th>ID</th>
    <th>Visitor Name</th>
    <th>Department</th>
    <th>Purpose</th>
    <th>Schedule Date Time</th>
    <th>Entry Source</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of checkinTemp">
    <td>{{data.id}}</td>
    <td>
      <a  (click)="viewCheckinData(data)"> {{data.f_name}} {{data.l_name}} </a>
      <span>
            <a  (click)="editCheckinData(data)">Edit</a>
        <a  (click)="confirmDelete(data)">Delete</a>
      </span>
    </td>
    <td>
      <span *ngIf="data.department == null || data.department == ''">N/A</span>
      <span *ngIf="data.department !== null ">{{data.department}}</span>
    </td>
    <td>
      <span *ngIf="data.purpose == null || data.purpose == ''">N/A</span>
      <span *ngIf="data.purpose !== null ">{{data.purpose}}</span>
    </td>
    <td>{{data.pre_check_in | date:'short'}}</td>
    <td>{{data.creator_id}}</td>
  </tr>

  </tbody>
</table>


<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

Maintenant, lorsque l'utilisateur appuie sur supprimer, la confirmDelete(data) est appelée. La fonction dans le fichier TS:

confirmDelete(item) {
  this.confirmationService.confirm({
    message: 'Are you sure you want to delete this Visitor?',
    header: 'Confirmation',
    accept: () => {
      this._appService.deleteCheckin(item.id).subscribe(res => {
        // Splice Or something so the page doesnt reload but the data gets removed from the view.
        this.flashMsg.flashMsg('success', 'Deleted', 'Visitor has been deleted.');
      },
      err => {
        this.flashMsg.flashMsg('error', 'Error', 'Visitor has not been deleted.');
      });
    },
    reject: () => {
    },
  });
}

Jusqu'à présent, lorsque je supprime des données, les données sont supprimées et le message de confirmation apparaît, mais les données sont toujours affichées dans la vue jusqu'à ce que la page soit rechargée. Existe-t-il un moyen de supprimer les données du tableau sans charger la page? J'ai recherché l'épissure mais n'ai pas eu de chance de l'utiliser dans le code.

Answer 1

Après avoir supprimé avec succès votre élément du serveur, vous pouvez le supprimer du tableau à l'aide de splice(...) comme ceci:

const index = this.checkinTemp.indexOf(item);
this.checkinTemp.splice(index, 1);