ng2-smart-table does not bind after delete

Question

I am trying to use ng2-smart-table to show data and inline editing. However it seems something is wrong with this component. I cloned the repo and run some tests locally. I got the basic example demo and added the input data object to see the changes/binding in the object:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
<pre>{{data | json}}</pre>

When I "Add New" row, it shows the new entry in the object array as expected. Editing any row works too, updating the row properly. However, when you delete a row, the object does not change and keeps showing the deleted row in the object array but not in the grid. When I try to add another row, it shows the new row in the grid, but it does not update/bind the new value in the object array. Update still works as expected.

I post this question in ng2-smart-table's github and I got not answer there so I hope I can get it here.

So it this a real bug? Here is the Plunker with my tests.

Thank y'all.

Answer 1

You have to refresh the local datasource which you handed to the table.

This is how I did it.

HTML

<ng2-smart-table 
    [settings]="itemTableSettings"
    [source]="itemSource" 
    (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>

Typescript Code

import {LocalDataSource} from 'ng2-smart-table';

items: Item[];
itemSource: LocalDataSource;

itemTableSettings = {
    delete: {
      confirmDelete: true
    },
    columns: {...}
}

constructor() {}

ngOnInit() {
    this.itemSource = new LocalDataSource(this.items);
}

onDeleteConfirm(event) {

    // Delete item from array
    let index = this.items.indexOf(event.data);
    console.log(index);
    this.items.splice(index, 1);

    // Update the array in the service class


    // Update the local datasource
    this.itemSource = new LocalDataSource(this.items);
}

Worked for me.

Answer 2

Here you are a simpler solution:

 onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      const index = event.source.data.indexOf(event.data);
      event.source.data.splice(index, 1);
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

Answer 3

Added few lines of code to the plnkr code provided

Here is the working Plunker: https://plnkr.co/edit/UW9s11xhi5wJgt0nLzXj?p=preview

In the template

<ng2-smart-table [settings]="tableSettings" [source]="data"
(deleteConfirm)="modifyData($event)"
(createConfirm)="addData($event)"
></ng2-smart-table>
    <pre>{{data | json}}</pre>

In app.ts

delflag=false;
  addData(event){
    if(this.delflag){
      this.data.push(event.newData);
    }
    // console.log(event);
    event.confirm.resolve(event.newData);
  }
  modifyData(event){
    this.delflag=true;
    // console.log(this.data);
    let delrow=Object.keys(event.data);
    for(var j in this.data)
    {
      // console.log(this.data,event.data);
    if(this.data[j]==event.data)
      {
        this.data.splice(j,1);
        // this.data=event.source.data;
      }
    }
    event.confirm.resolve(event.source.data);

    // console.log(this.data)
    if(this.data.length==0)
      {this.data=[];
        this.delflag=false;
      }
  }

In settings

tableSettings = {
add:{
     confirmCreate:true
    },
     delete :{
       confirmDelete: true
     },
//other fields
}

Hope this helps !!!

Answer 4

Assome data is your table data source, so you have:

onDeleteConfirm(event): void {
  if (window.confirm('Are you sure you want to delete?')) {
   this.data.remove(event.data)
  } else {

  }
}