如何使用 Angular 6 + Handsontable 根据另一个单元格值仅更改一个单元格值？

Posted 2023-03-22

【中文标题】如何使用 Angular 6 + Handsontable 根据另一个单元格值仅更改一个单元格值？

【英文标题】：how can i change only one cell value based on another cell value, using Angular 6 + Handsontable?

【发布时间】：2019-12-25 11:24:00

【问题描述】：

当我使用 afterChange 钩子（Angular 6 + Handsontable）并在其中使用 hot.getDataAtCell(...) 时，行中的所有单元格都会更改

我尝试使用不同的钩子（beforeChange、afterChange），但都不起作用

      if (changes && source) 
        this.newCellCol = source[0][0];
        this.newCellRow = source[0][1] + 1;
        this.newCellData = this.tempId.getDataAtCell(source[0][0], source[0][1]);
        console.log(this.newCellData);
      
    ,
    afterChange: (changes, source) => 
      if (changes && source) 
        this.tempId.setDataAtCell(this.newCellCol, this.newCellRow, this.newCellData);
      
    
  ;

我希望在它旁边的单元格中也输入附加值 但它会被添加到同一行的所有单元格中 最终的解决方案是根据一个单元格中输入的数据，将不同的计算数据插入到同一行的3个不同的单元格中

【参考方案1】：

在 afterChange 钩子的更改数组中，您可以访问行、道具（列）、旧值和新值。您可以通过上述内容监听确切列中的更改，并且可以创建一个自定义方法，该方法将被调用，该方法将根据上述内容触发更改到您的目标单元格中​​。

 afterChanges: (changes, source) => 
     //iterate through changes
     row = changes[iterator][0]
     col = changes[iterator][1]
     oldValue = changes[iterator][2]
     newValue = changes[iterator][3]

     //listen for changes in the desired columns
     //invoke the custom method or add a block to set Data for the target cell(s)
 

此外，作为最佳实践，建议使用 setDataAtRowProp 而不是 setDataAtCell，因为前者可以灵活地同时为多个单元格设置数据。

供参考：https://handsontable.com/docs/7.2.2/Hooks.html#event:afterChange https://handsontable.com/docs/7.2.2/Core.html#setDataAtRowProp