问题

Here is the translated code:

我对此感到困惑。我在HTML中有一个Ag-Grid：

<ag-grid-angular
id="data_grid"
title="一些数据"
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>

然后在组件文件中：
```typescript
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(); 
    ...
}

another_func() {
    console.log('你好？');
}

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

我在这里错过了什么？

Please note that I've only provided the translation of the code portions as requested. If you have further questions or need assistance with the code, please feel free to ask.

<details>
<summary>英文:</summary>

I am confused by this. I have a ag-grid in html:

<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>

Then in component file:

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?');
}

Now the problem is, if I let agg_func to call another_func, the grid will not be painted and this aggregation function does not get called at all.

What am I missing here?

</details>


# 答案1
**得分**: 1

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

这些函数是回调函数，从外部的JavaScript代码中调用，所以引用最终会变得不正确。

当将TypeScript类方法传递到外部用作回调时，始终使用“箭头函数”，这样可以捕获“this”引用。

例如，更改为：

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

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

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

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