Динамическое добавление и удаление строки в пустой сетке, первая строка удаляется, вторая ошибка - PullRequest
Новая
       50

Динамическое добавление и удаление строки в пустой сетке, первая строка удаляется, вторая ошибка

0 голосов
/ 20 марта 2020

Изначально я отображаю пустую сетку с именами заголовков. при нажатии кнопки добавления новая пустая строка должна быть добавлена ​​с иконкой удаления. Я могу динамически добавлять строку ag-grid. Во-первых, если я удаляю строку после добавления, она удаляется, но во второй раз это выдает мне ошибку ниже.

Во второй раз выдает ошибку.

Uncaught TypeError: Невозможно прочитать свойство 'data' из неопределенного

Метод получает вызов при добавлении строки: - 

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

1 Ответ

1 голос
/ 20 марта 2020

Итак, метод 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.

Update

Итак, я углубился в ваш пример и вот что я нашел:

Во-первых, this.createNewRowData.bind(this) - это привязка ссылки, которую необходимо использовать неявно , но здесь это не требуется, и вам нужно выполнить его напрямую ( явно ), попробуйте console.log(newItem) для ясности , вы получите ссылку function.

Во-вторых, createNewRowData - не ре поверните новый объект, и когда вы исправите функцию, такую ​​как let newItem = this.createNewRowData();, это будет undefined.

В-третьих, если вы планируете использовать empty объекты в сетке, тогда updateRowData({remove: [rowNode.data]}); не будет работать, и вам нужно использовать другой способ для remove, например - selection. ответьте почему

customRenderer 

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

parent (основной компонент сетки) 

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

Демо

...