AG-Grid: отображать определенные кнопки «действия» в сетке в зависимости от условия

Question

Я использую общедоступную версию "AG Grid" в своем приложении Angular 6.

Моя задача сейчас заключается в следующем: у меня довольно простая структура данных, список которой привязан ксетка для отображения.Исходя из его значений, я хотел бы добавить столбец «Действия» в сетку, чтобы предоставить пользователю доступ к определенным действиям, например, удалить запись, «продвинуть» ее и т. Д.

Для отдельных данных -связанный столбец, я получаю соответствующее значение данных каждой строки, когда она связана, и я могу, например, отформатировать отображение, используя рендеринг ячейки .Я надеялся, что смогу сделать что-то похожее со своим столбцом «Действия» (который не привязан к конкретному элементу данных класса) - но, похоже, мой «рендер-ячейка действия» ничего не получает в основуего решения о.

У меня есть структура данных примерно так:

export interface Indicator {
    Id: string;
    Name: string;
    IsGlobal: boolean;
}

Массив этих Indicators привязан к AG-сетке в функции OnInitмой угловой компонент.

Я определяю свой столбец сетки AG следующим образом:

columnDefs = [
    { headerName: 'Name', field: 'Name', width: 200, editable: true },
    { headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
      cellRenderer: (data) => { 
        // here, "data" refers to the "IsGlobal" value of the row being displayed
        if (data.value === true) {
          return 'Ja';
        } else {
          return 'Nein';
        }
      },
    },
    { headerName: 'Actions', width: 125,
        cellRenderer: (data) => {
            // here, I was hoping the "data" would refer to the entire
            // row / object being bound, so that I could check for 
            // certain conditions to be true (or false)
            if (data.IsGlobal.value === true) 
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
                       '<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
            }      
            else
            {
                return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
            }
        }
    }
  ];

Я хотел бы иметь возможность определить в определениях моих столбцов, что в столбце моего действия отображаетсяКнопка "Продвигать запись" только ЕСЛИ данные строки, о которой идет речь, имеют IsGlobal = false.Я надеялся, что data, передаваемый в средство визуализации ячеек, будет объектом данных всей строки (типа Indicator) - но, похоже, это не так.

Как я могу решить, какойзначки для отображения в столбце «Действия» в определениях моего столбца?

Answer 1

на cellRenderer - вы получите params значение, представляющее объект:

interface ICellRendererParams {
    value: any, // value to be rendered
    valueFormatted: any, // value to be rendered formatted
    getValue: ()=> any, // convenience function to get most recent up to date value
    setValue: (value: any) => void, // convenience to set the value
    formatValue: (value: any) => any, // convenience to format a value using the columns formatter
    data: any, // the rows data
    node: RowNode, // row rows row node
    colDef: ColDef, // the cells column definition
    column: Column, // the cells column
    rowIndex: number, // the current index of the row (this changes after filter and sort)
    api: GridApi, // the grid API
    eGridCell: HTMLElement, // the grid's cell, a DOM div element
    eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
    columnApi: ColumnApi, // grid column API
    context: any, // the grid's context
    refreshCell: ()=>void // convenience function to refresh the cell
}

Таким образом, чтобы получить доступ к row-data, вам нужно использовать params.dataили params.node.data

cellRenderer: (params) => {
    if (params.data.IsGlobal.value === true) 
    {
        ...
    }      
    else
    {
        ...
    }
}

Но помните, когда вы будете использовать встроенный cellRenderer - вы можете реализовать только шаблон HTML, для обработки логики вам необходимо создать собственный cellRenderer, который будет содержать необходимые функциии так далее.

вы не сможете выполнить component функций throw cellRenderer встроенную реализацию