Angular: ag grid navigateToNextRow 回调不知道这个

Question

按照 ag-grid 的示例 https://www.ag-grid.com/javascript-grid-selection/#deep-dive-example-using-for-each-node 我想实现一种使用键盘错误更改行选择的方法。

这是我的代码：

 <ag-grid-angular #agGrid class="ag-theme-bootstrap" headerHeight="36" rowHeight="43"
    [rowData]="rowData | async" [columnDefs]="columnDefs" [rowSelection]="rowSelection" 
    [ [navigateToNextCell]="myNavigation"
    (gridReady)="onGridReady($event)" (rowDataChanged)="onRowDataUpdated()"
    >
  </ag-grid-angular>

  gridColumnApi;
  gridApi;

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    }

myNavigation(params) {
    console.log('nav');
    console.log(this.gridApi);
    var previousCell = params.previousCellDef;
    var suggestedNextCell = params.nextCellDef;

    var KEY_UP = 38;
    var KEY_DOWN = 40;
    var KEY_LEFT = 37;
    var KEY_RIGHT = 39;

    switch (params.key) {
      case KEY_DOWN:
        previousCell = params.previousCellDef;
        console.log(params);
        this.gridApi.forEachNode((node) => {
          if (previousCell.rowIndex + 1 === node.rowIndex) {
            node.setSelected(true);
          }
        });
        return suggestedNextCell;
      case KEY_UP:
        previousCell = params.previousCellDef;
        // set selected cell on current cell - 1
        this.gridApi.forEachNode((node) => {
          if (previousCell.rowIndex - 1 === node.rowIndex) {
            node.setSelected(true);
          }
        });
        return suggestedNextCell;
      case KEY_LEFT:
      case KEY_RIGHT:
        return suggestedNextCell;
      default:
        throw "this will never happen, navigation is always one of the 4 keys above";
    }
  }

问题是，在方法 MyNavigation 中我可以访问 'this'。我收到错误 "can not Access gridApi of undefined." 当我将 'this' 登录到控制台时，我得到了未定义。有谁知道我做错了什么？

Answer 1

navigateToNextCell 之前的额外起始方括号可能会破坏它，但应该抛出模板解析错误。看起来 gridReady 事件没有触发。试图对此发表评论而不是回答，但它不会让我这样做。

也使用 previousCellPosition 和 nextCellPosition 代替 previousCellDef 和 nextCellDef。

您可能还需要使用

在构造函数中将您的函数与控制器绑定

this.myNavigation = this.myNavigation.bind(this);

或者使用箭头函数。

Angular: ag grid navigateToNextRow 回调不知道这个

Angular: ag grid navigateToNextRow Callback does not know this

ag-grid

angular

ag-grid-angular