ag-grid tabToNextCell 实现答案

【问题标题】：ag-grid tabToNextCell Implementationag-grid tabToNextCell 实现
【发布时间】：2023-03-03 03:17:01
【问题描述】：

我在 Angular 中使用带有 ag-grid 的 tabToNextCell 时遇到问题。当有人将标签移到表格末尾时，我想添加一个新行。我的设置如下：

<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 未定义。

【问题讨论】：

我的阅读方式不同。错误信息。你有 addBidder() 方法吗？是 addBidder 没有定义，不是这个
对不起@Vega ...我没有将 addBidder 方法放在原始示例中。我在另一个解决此问题的示例中添加了这一点

标签： angular ag-grid ag-grid-angular

【解决方案1】：

好的...在为此苦苦挣扎了太久之后，我意识到我可以让 onTab 成为一个箭头函数，这样就可以处理this 问题：

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

如上所述定义OnTab 有效！

【讨论】：