在空的Ag-grid中动态添加和删除行，第一次删除行，第二次抛出错误 [英] Dynamically adding and deleting row in empty ag-grid,first time row is getting deleted, second time throwing error

问题描述

最初，我正在显示带有标题名称的空网格。在单击添加按钮时，应该用删除图标添加新的空行。我能够动态添加行ag-grid。第一次，如果我在添加后删除行，它将被删除，但是第二次它给了我以下错误..

Initially i am displaying empty grid with header names. on click of add button new empty row should be added with delete icon.I am able to dynamically add row ag-grid.First time if i delete row after adding, its getting deleted, but second time its giving me below error..

第二次，这给了我错误。

Second time, its giving me error.

未捕获的TypeError：无法读取属性未定义的'数据'

Uncaught TypeError: Cannot read property 'data' of undefined

调用添加行的方法：-

createNewRowData() {
  let newData = {
    tableName: '',
    schemaName: '',
    columnName: '',
    condition: ''
  };
  console.log('newDATA', newData);
  this.setState({
    newCount:this.state.newCount+1
})
}
onAddRow() {
  let newItem = this.createNewRowData.bind(this);
  let res = this.state.gridOptions.api.updateRowData({add: [newItem]});
}

删除时调用的方法：-

methodFromParent(cell) {
  const rowNode = this.state.gridOptions.api.getRowNode(cell.rowIndex);
  this.state.gridOptions.api.updateRowData({remove: [rowNode.data]});
  this.state.newCount--;
}

我用于删除的自定义单元格渲染器出现在我正在使用的每一行中我的colDefs：-

my Custom cell renderer for delete which appears for each row which i am using in my colDefs:-

export default class DeleteButtonRenderer extends Component {
  constructor(props) {
    super(props);
    this.invokeParentMethod = this.invokeParentMethod.bind(this);
  }
  invokeParentMethod(e) {
    this.props.context.componentParent.methodFromParent(this.props.node);
  }
  render() {
    return (
      <span>
        <a
          style={{ height: 20, lineHeight: 0.5 }}
          onClick={this.invokeParentMethod}
        >
          <i className="far fa-trash-alt fa-2x" />
        </a>
      </span>
    );
  }
}

推荐答案

所以，方法 methodFromParent（rowIndex）-具有 rowIndex 输入属性，但它不属于 index ，则在此方法 .methodFromParent（+ e.target.id）中使用 e.target.id -如 index -这就是您面临问题的原因。

So, method methodFromParent(rowIndex) - has rowIndex input property, but it doesn't belong to index, you are using e.target.id in this method .methodFromParent(+e.target.id) - as index - that's why you faced with issue.

在 RowNode 界面，您可以访问 rowIndex

/** The index of this node in the grid, only valid if node is displayed in the grid, otherwise it should be ignored as old index may be present */
rowIndex: number;

在自定义渲染器上，您可以访问完整的节点数据（ RowNode 接口），因此只需将 node.rowIndex 传递给 invokeParentMethod 函数。

On custom renderer, you are able to access full node data (RowNode interface), so just pass node.rowIndex to invokeParentMethod function.

它可以首次使用，因为cuz id 可能相同为 index ，但无论如何要获取更多详细信息，我需要获取您的真实代码，因此，如果可以，请提供plinkr或stackblitz。

It could work for first time cuz id could be same as index, but anyway for more details, I need to get your real code, so if you are able, provide plinkr or stackblitz.

更新

Update

所以，我深入在您的样本中以及在这里我发现了什么：

首先， this.createNewRowData.bind（this）-是参考绑定，需要 隐式 使用，但此处不是必需的，您需要直接执行（ explicit ），为清晰起见尝试 console.log（newItem） ，您将获得函数参考。

First, this.createNewRowData.bind(this) - is a reference binding, which need to be used implicit, but it's not required here, and you need to execute it directly (explicit), try console.log(newItem) for clarity, you will get a function reference.

第二， createNewRowData -不返回新对象，当您修复函数执行如 let newItem = this.createNewRowData（）; 时，它将是 undefined 。

Second, createNewRowData - doesn't return a new object, and when you will fix a function exectution like let newItem = this.createNewRowData(); it would be undefined.

第三，如果您打算使用 empty 在网格中的对象，然后 updateRowData（{remove：[rowNode.data]}）; 不起作用，并且您需要对<$ c使用不同的方式$ c>删除，例如-选择。
回答原因

Third, if you are planning to use empty objects in the grid, then updateRowData({remove: [rowNode.data]}); wouldn't work and you need to use different way for remove, as an example - selection. answer why

customRenderer

customRenderer

invokeParentMethod(){
    this.props.node.setSelected(true);
    this.props.context.componentParent.methodFromParent();
}

父级（主网格组件）

methodFromParent(){
    let selectedData = this.gridApi.getSelectedRows();
    this.gridApi.updateRowData({ remove: selectedData });
};

演示

这篇关于在空的Ag-grid中动态添加和删除行，第一次删除行，第二次抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！