Question

我正在尝试使用ng2-smart-table来显示数据和内联编辑。但是这个组件似乎有问题。我克隆了回购并在本地进行了一些测试。我得到了基本的示例演示并添加了输入数据对象以查看对象中的更改/绑定：

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

当我“添加新”行时，它会按预期显示对象数组中的新条目。编辑任何行也可以正常更新行。但是，当您删除行时，该对象不会更改并继续在对象数组中显示已删除的行，但不会在网格中显示。当我尝试添加另一行时，它会在网格中显示新行，但它不会更新/绑定对象数组中的新值。更新仍然按预期工作。

我在ng2-smart-table的github中发布了这个问题，我没有回答那里，所以我希望我能在这里得到它。

所以这是一个真正的错误？这是Plunker我的测试。

谢谢你们。

Answer 1

您必须刷新您提交给表格的本地数据源。

这就是我做到的。

<强> HTML

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

打字稿代码

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);
}

为我工作。

Answer 2

这是一个更简单的解决方案：

 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

为提供的plnkr代码添加了几行代码

以下是正在使用的Plunker：https://plnkr.co/edit/UW9s11xhi5wJgt0nLzXj?p=preview

在模板中

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

在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;
      }
  }

在设置中

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

希望这有帮助!!!

Answer 4

data是表数据源，因此您具有：

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

  }
}

删除后ng2-smart-table不绑定

4 个答案: