3

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

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

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

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

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

谢谢大家。

4

4 回答 4

4

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

我就是这样做的。

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

为我工作。

于 2018-03-22T14:26:51.010 回答
1

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

 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();
    }
  }
于 2018-05-09T19:48:08.437 回答
0

Assomedata是您的表数据源，因此您有：

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

  }
}

于 2019-10-08T14:48:34.603 回答
0

在提供的 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
}

希望这可以帮助 ！！！

于 2017-12-24T12:16:20.550 回答