Question

单击“插入新行”按钮后，将触发以下方法，并将空的新行追加到当前最后一行。

insertNewRow(){

    var newItem = this.createNewRowData();
    var res = this.gridOptions.api.updateRowData({add: [newItem]});

  }

createNewRowData(){
    var newData = [];
    //blah blah
    return newData;
  }

在我在屏幕上丰富数据后，如何让网格获取新行（可能还有自上次数据库检索以来已更改的所有行）？

请注意，在点击“保存”按钮之前，我可以多次单击“插入新行”以创建多行。

saveChanges(){
    var data = "HOW TO GET NEW ROWS AND UPDATED ROWS, AND STORE HERE??";
    this.myAppService.saveData(data).subscribe(
    //blah blah
    );
    console.log("Saved successfully to database");
  }

编辑1

尝试将先前的记录存储到变量（“tableData”）中：

tableData: string[] = [];
currentData: string[] = [];

retrieveTableData (){
    //blah blah
    tableData loaded with an array of json
}

saveChanges(){
    this.gridOptions.api.forEachNode((rowNode) => {
      this.currentData.push(rowNode.data);
    });
    console.log(this.currentData);
    this.currentData.forEach(item => {
      console.log(item);
      if (!this.tableData.includes(item)){
      console.log("Updated Row: " + item);
      }
    });
  }

我想数据类型等存在一些问题。

控制台记录“tableData”和“currentData”的示例：

[object Object],[object Object],[object Object]

如果我打印出任何变量下的每个项目：

{FUND_CODE: "TEST1", PORT_CODE: "TEST1"}

Answer 1

其他方法是在您的对象中保留标记以标识其新的/已修改的

interface Item {
 //other properties
 newOrModified?: string;
}
_______________

items:Item[];
insertNewRow(){
    var newItem = this.createNewRowData();
    newItem.newOrModified="New";
    var res = this.gridOptions.api.updateRowData({add: [newItem]});
  }

onCellValueChanged(item: Item ) {
 item.newOrModified="Modified";
}

saveChanges(){
 cost modifieditems = this.items.filter(item=> item.newOrModified === "Modified" );
  cost newitems= this.items.filter(item=> item.newOrModified === "New" );
}

<ag-grid-angular style="width: 100%; height: 500px;"
         class="ag-fresh"
         [columnDefs]="columnDefs"
         [rowData]="items"
         (gridReady)="onGridReady($event)"
         (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>

你可以这样做，

//store your old records in one variable 
this.previousrecords = this.http.getAllRecords();
this.bindRecrods = [...this.previousrecords];//bind this to grid

//when saving records try like this 
this.bindRecrods.forEach(rec=> {
 if( !this.previousrecords.includes(rec) ){
   //insert or update record
 }
});

Answer 2

回答这个问题有点晚了，但是最近我遇到了同样的问题，并想出了一种方法来帮助我克服这个问题，因此想与他人分享。

set: Set<string> = new Set<string>();

onCellValueChanged(params: any) {
  this.set.add(params.node.id);
}

onSubmit() {
  this.set.forEach( id => console.log(JSON.stringify(this.grid.api.getRowNode(id).data)));
  // call the api to update data
  // clear the set post update call
  this.set.clear();
}

在事件 cellValueChanged 上调用方法 onCellValueChanged 。在方法内部，将要编辑的行的行ID添加到集合中。提交数据时，遍历一组已编辑的行ID，并使用grid api获取行。

如何在Ag-grid中获取更新的行

2 个答案: