ag-grid tabToNextCell 实现

Question

我在 Angular 中将 tabToNextCell 与 ag-grid 一起使用时遇到问题。我想在有人按 Tab 键到 table 末尾时添加一个新行。我是这样设置的：

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="bidders$ | async"
  [tabToNextCell]="onTab"
  [stopEditingWhenCellsLoseFocus]="true"
  class="ag-theme-alpine"
  domLayout='autoHeight'
  style="width: 100%;"
>
</ag-grid-angular>

在我的组件中，onTab 和 addBidder 看起来像这样：

  onTab({nextCellPosition, previousCellPosition}: TabToNextCellParams): CellPosition {
    if(!nextCellPosition) {
      this.addBidder()
      return previousCellPosition;
    }
    return nextCellPosition;
  }

  addBidder() {
    this.biddersService.addBidder();
  }

但是，当我切换到末尾并触发对 this.addBidder() 的调用时，this 未定义并且出现以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'addBidder')

如果我在它调用 this.addBidder() 的地方放置一个断点并检查内容，this 在那个点是未定义的。所以，我觉得应该如何构造 onTab 函数。

此外，我尝试将 addBidder() 方法传递给 [tabToNextCell] 赋值中的 onTab() 方法，但这也不起作用：

模板：

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="bidders$ | async"
  [tabToNextCell]="onTab(addBidder)"
  [stopEditingWhenCellsLoseFocus]="true"
  class="ag-theme-alpine"
  domLayout='autoHeight'
  style="width: 100%;"
>
</ag-grid-angular>

并且在组件中，我将 onTab 更改为以下内容：

  onTab(func: any) {
    return ({nextCellPosition, previousCellPosition}: TabToNextCellParams): CellPosition => {
      if (!nextCellPosition) {
        func();
        return previousCellPosition;
      }
      return nextCellPosition;
    };
  }

但是，在组件内的 addBidder() 方法中调用 this.biddersService.addBidder() 时，this 未定义。

Answer 1

好的...在为此苦苦挣扎了太久之后，我意识到我可以使 onTab 成为一个箭头函数，这将解决 this 问题：

  onTab = ({nextCellPosition, previousCellPosition}: TabToNextCellParams): CellPosition => {
    if (!nextCellPosition) {
      this.addBidder();
      return previousCellPosition;
    }
    return nextCellPosition;
  };

如上所述定义 OnTab 有效！

ag-grid tabToNextCell 实现

ag-grid tabToNextCell Implementation

ag-grid

angular

ag-grid-angular