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.