在空的 ag-grid 中动态添加和删除行，第一次行被删除，第二次抛出错误

Question

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

第二次，报错。

未捕获的类型错误：无法读取未定义的属性“数据”

调用添加行的方法：-

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 中使用的每一行：-

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

Answer 1

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

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

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

因为id 可能与index 相同，所以第一次可以使用，但无论如何，我需要获取你的真实代码，所以如果你有能力，请提供 plinkr 或 stackblitz。

更新

所以，我深入研究了你的样本，在这里我发现了什么：

首先this.createNewRowData.bind(this) - 是引用绑定，需要使用隐式，但这里不是必须的，需要直接执行（显式），请尝试console.log(newItem) 以清楚说明，您将获得function 参考。

其次，createNewRowData - 不返回新对象，当您修复像let newItem = this.createNewRowData(); 这样的函数执行时，它将是undefined。

第三，如果您打算在网格中使用empty 对象，那么updateRowData({remove: [rowNode.data]}); 将不起作用，您需要对remove 使用不同的方式，例如-selection。 answer why

自定义渲染器

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

父级（主网格组件）

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

Demo