Блог

Я только начал использовать ag-grid в одном из своих проектов, и я использую редактор ячеек «agSelectCellEditor» для двух столбцов: «функция» и «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,
    };
  }
 

Проблема в том, что «это» не определено. Я знаю, что это проблема, которая связана с областью действия javascript. Каким-то образом мне нужно предоставить «это» в область projectRoleCellEditorParams.
Но как я могу это сделать?

Я нашел ответ сам. Вы можете использовать объект контекста.

Установите что-то в контекст:

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