关于javascript：ng2-smart-table删除后不绑定


ng2-smart-table does not bind after delete

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

1
2
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
[cc lang="javascript"]{{data | json}}

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

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

这是一个真正的错误吗？这是经过测试的柱塞。

谢谢你们。

相关讨论

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

这就是我的做法。

HTML

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

typescript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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);
}

为我工作。

相关讨论

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

1
2
3
4
5
6
7
8
9
 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();
    }
  }
相关讨论

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

1
2
3
4
5
6
7
onDeleteConfirm(event): void {
  if (window.confirm('Are you sure you want to delete?')) {
   this.data.remove(event.data)
  } else {

  }
}

在提供的plnkr代码中添加了几行代码

这里是工作中的柱塞：https：//plnkr.co/edit/UW9s11xhi5wJgt0nLzXj？p = preview

In the template

1
2
3
4
5
<ng2-smart-table [settings]="tableSettings" [source]="data"
(deleteConfirm)="modifyData($event)"
(createConfirm)="addData($event)"
></ng2-smart-table>
    [cc lang="javascript"]{{data | json}}

In app.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

1
2
3
4
5
6
7
8
9
tableSettings = {
add:{
     confirmCreate:true
    },
     delete :{
       confirmDelete: true
     },
//other fields
}

希望这会有所帮助!!!