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