Angular ag-grid自定义聚合函数不能调用其他函数？

Question

我对此感到困惑。我在 html 中有一个 ag-grid：

<ag-grid-angular
    id="data_grid"
    title="Some Data"
    class="ag-theme-alpine ag-theme-material" 
    style="width: 2800px; height: 800px; margin-right: 1%; float: left; font-size: 16px !important"
    (gridReady)="onDataGridReady($event)"
    [rowData]="row_data" 
    [columnDefs]="column_defs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [groupDefaultExpanded]="groupDefaultExpanded"
    [animateRows]="true"
    [gridOptions]="grid_options">
  </ag-grid-angular>

然后在组件文件中：

public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    sortable: true,
    resizable: true,
  };
  public autoGroupColumnDef: ColDef = {
    minWidth: 200,
  };
  public groupDefaultExpanded = 1;
  public grid_options = {
    suppressAggFuncInHeader : true
  }
column_defs = [
    {headerName: 'A', field: 'many_As', rowGroup: true },
    {headerName: 'B', field: 'many_Bs', width: 250, aggFunc: this.agg_func },
  ];

agg_func(params: any) {
    ...
    another_func(); // the grid gets painted only if this line is commented out
    ...
}

another_func() {
    console.log('Hello?');
}

现在的问题是，如果我让 agg_func 调用 another_func，网格将不会被绘制并且这个聚合函数根本不会被调用。

我在这里错过了什么？

Answer 1

这很可能是“this”引用的问题。

函数是回调，从类外部的 JavaScript 代码调用，因此引用最终是不正确的。

将打字稿类方法作为回调传递给外部使用时，始终使用“箭头函数”，它捕获“this”引用。

例如改成：

const agg_func = (params: any) => {
    another_func(); 
}

const another_func = () => {
    console.log('Hello?');
}