how to use splice in angular 5

Question

I have created a table that displays data fetched from the database. The TS part that fetches the data looks something like:

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

The table gets generated and I have added an edit and delete function, my view code:

<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>

Now when the user presses delete the confirmDelete(data) gets called. The function in the TS file:

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: () => {
    },
  });
}

Until now when I delete data, the data gets deleted and the confirmation message pops up, but the data is still displayed in the view until the page gets reloaded. Is there a way to remove the data from the table without the page loading? I looked up splice but had no luck using it in the code.

Answer 1

After you have successfully deleted your item from the server, you can delete it from the array using splice(...) like this:

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