具有动态参数的 Ag-grid 单元格编辑器：使用全局变量

Question

我刚刚开始在我的一个项目中使用 ag-grid，并且我正在使用“agSelectCellEditor”单元格编辑器来编辑两列：“function”和“project_role”。项目角色列的选择选项取决于功能单元格值。

这是网格配置：

<ag-grid-angular
        class="ag-theme-balham"
        style="height: calc(100% - 100px)"
        [defaultColDef]="demandsDefaultColDef"
        (gridReady)="onDemandsGridReady($event)"
        (cellValueChanged)="onDemandsCellValueChanged($event)"
        [frameworkComponents]="frameworkComponents"
      >
        <ag-grid-column headerName="Resource Description" headerClass="test">
          <ag-grid-column
            field="function"
            [cellEditor]="'agSelectCellEditor'"
            [cellEditorParams]="functionOptions"
            [sortable]="true"
            [pinned]="true"
            [width]="140"
          ></ag-grid-column>
          <ag-grid-column
            field="project_role"
            headerName="Project Role"
            [cellEditor]="'selectEditor'"
            [cellEditorParams]="projectRoleCellEditorParams"
            [sortable]="true"
            [pinned]="true"
            [width]="140"
          ></ag-grid-column>
 <ag-grid-angular/>

我按照文档实现了“动态参数”：

projectRoleCellEditorParams(params) {
    const selectedFunction = this.functions.find(x => x.name === params.data.function);
    const allowedProjectRoles = selectedFunction.projectRoles.map(x => x.name);
    return {
      values: allowedProjectRoles,
    };
  }

问题在于“this”未定义。我知道这是一个与 javascript 范围相关的问题。不知何故，我需要向projectRoleCellEditorParams范围提供“this”。

但是我该怎么做呢？

Answer 1

我自己找到了答案。您可以使用 context 对象。

为上下文设置一些内容：

  onDemandsGridReady(params): void {
    this.demandsGridApi = params.api;
    this.demandsGridApi.context.functions = this.functions;
  }

在函数中使用它：

 const selectedFunction = params.api.context.functions.find(
      (x) => x.name === params.data.function
    );